javascript实现div的伸缩
只是需要更新div层的width和height即可。
但是需要考虑兼容性问题,首先给定一个div层,如果div层本身带边框,这个时候利用offsetXxx获取div层的宽度和高度时包含了div层的边框,需要减去两边边框的宽度,这个时候获取边框的宽度会有兼容的问题。
IE下面可以使用
obj.currentStyle.borderWidth
的方式获取边框的宽度,但是在火狐之外的其它浏览器只能使用getComputedStyle方法,这是一个全局的方法,第一个参数是元素对象,第二个为null。
window.getComputedStyle(obj,null).borderLeftWidth
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>