纯javascript实现div的伸缩

最新推荐文章于 2024-09-23 17:19:25 发布

原创最新推荐文章于 2024-09-23 17:19:25 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

jQuery & javaScript 同时被 2 个专栏收录

44 篇文章

订阅专栏

HTML & CSS

35 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现div的伸缩效果，主要关注在处理兼容性问题时的技巧，特别是针对不同浏览器中获取边框宽度的不同方法，如IE下的offsetWidth和Firefox下的currentStyle。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript实现div的伸缩

只是需要更新div层的width和height即可。

但是需要考虑兼容性问题，首先给定一个div层，如果div层本身带边框，这个时候利用offsetXxx获取div层的宽度和高度时包含了div层的边框，需要减去两边边框的宽度，这个时候获取边框的宽度会有兼容的问题。

IE下面可以使用

obj.currentStyle.borderWidth

的方式获取边框的宽度，但是在火狐之外的其它浏览器只能使用getComputedStyle方法，这是一个全局的方法，第一个参数是元素对象，第二个为null。

window.getComputedStyle(obj,null).borderLeftWidth

网上的在FF下使用currentStyle

if(! document.all){
	HTMLElement.prototype.__defineGetter__("currentStyle", function () {
		return this.ownerDocument.defaultView.getComputedStyle(this, null);
	});
}

草稿

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>div层的伸缩</title>
<style type="text/css">
	*{margin:0px;padding:0px;font-family:微软雅黑;}
	.content{width:400px;height:300px;margin-top:50px;margin-left:50px;border:10px solid #AFAFAF;background:#EFEFEF;position:relative;}
	button{blr:expression(this.onFocus=this.blur();); margin-top:10px; margin-left:50px; outline:none;}
</style>
</head>
<script type="text/javascript">
	function $(id)
	{
		if(arguments.length==1 && "string"== typeof id)
		{
			return document.getElementById(arguments[0]);
		}
	}
	var Class=
	{
		create:function()
		{
			return function()
			{
				this.initialize.apply(this,arguments);
			}
		}
	};
	var Extend=function(desc,src)
	{
		for(var property in src)
		{
			desc[property]=src[property];
		}
		return desc;
	};
	Object.prototype.extend=function(obj)
	{
		return  Extend.apply(this,[this,obj]);
	}
	//事件添加，考虑浏览器兼容
	function bind(obj , eventName, eventFn)
	{
		if(obj.addEventListener)
		{
			obj.addEventListener(eventName,eventFn,false);
		}
		else  if(obj.attachEvent)
		{
			obj.attachEvent("on"+eventName, eventFn);
		}
		else 
		{
			obj["on"+eventName]=eventFn;
		}
	}
	//计算容器的宽度和高度
	Object.prototype.cssSize=function(arg)
	{
		if(arg=="width")
		{	
			var borderWidth=convert(this.currentStyle.borderLeftWidth)+convert(this.currentStyle.borderRightWidth);
			return  this.offsetWidth-borderWidth;
		} 
		else  if(arg=="height")
		{
			var borderHeight=convert(this.currentStyle.borderTopWidth)+convert(this.currentStyle.borderBottomWidth);
			return  this.offsetHeight-borderHeight;
		}
		else
		{
			return ;
		}
	}
	//去掉像素中的"px"单位
	function convert(val)
	{
		return parseInt(val.substr(val,val.length-2));
	}
	//使得除IE之外的元素也可以使用currentStyle获取样式值
	if(! document.all){
		HTMLElement.prototype.__defineGetter__("currentStyle", function () {
			return this.ownerDocument.defaultView.getComputedStyle(this, null);
		});
	}
	var ChangeSize=Class.create();
	ChangeSize.prototype=
	{
		initialize:function(content,method1,method2,options)
		{
			current=this;
			var startWidth=$(method1),startHeight=$(method2);
			this.content=$(content);
			bind(startWidth,"click", function() { current.change(); });
			bind(startHeight,"click", function() { current.change(); });
			this.setOptions(options);
			this.len=0;
		},
		change:function()
		{
			current=this;
			
			var contentWidth=convert(this.content.currentStyle.width);
			var contentHeight=convert(this.content.currentStyle.height);
			if(contentWidth>0)
			{
				this.content.style.width=contentWidth-this.options.step+"px";
			}
			if(contentWidth==0)
			{
				this.content.style.height=contentHeight-this.options.step+"px";
			}
			var timer=window.setTimeout(function() { current.change(); } , this.options.time);
		},
		start:function()
		{
			this.change();
		},
		setOptions:function(options)
		{
			this.options=
			{
				top:100, //设置最终停留的位置
				left:200,
				time:10,//设置变换的时间间隔
				step:20//变换的像素
			},
			Object.extend(this.options.options || {});
		}
	}
	window.onload=function()
	{
		new ChangeSize("content","startWidth","startHeight");
	}
</script>
<body>
	<div class="content" id="content">
	</div>
	<button id="startWidth">开始(宽度优先)</button>
	<button id="startHeight">开始(高度优先)</button>
</body>
</html>