javascript瀹???iv??浼哥缉
??????瑕??存??iv灞???width??height?冲????
浣?????瑕??????煎?规?ч??棰?锛?棣???缁?瀹?涓?涓?div灞?锛?濡???div灞???韬?甯?竟妗?锛?杩?涓??跺???╃??ffsetXxx?峰??div灞???瀹藉害??楂?搴??跺????浜?div灞???杈规?锛???瑕????讳袱杈硅竟妗???瀹藉害锛?杩?涓??跺???峰??杈规???瀹藉害浼????煎?圭????棰???
IE涓??㈠??浠ヤ娇??
obj.currentStyle.borderWidth
???瑰??峰??杈规???瀹藉害锛?浣????ㄧ????涔?澶????跺??娴?瑙??ㄥ???戒娇??etComputedStyle?规?锛?杩???涓?涓??ㄥ????规?锛?绗?涓?涓????版????绱?瀵硅薄锛?绗?浜?涓?涓?ull??
window.getComputedStyle(obj,null).borderLeftWidth
缃?涓?????F涓?浣跨??urrentStyle
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));
}
//浣垮???E涔?澶?????绱?涔???浠ヤ娇??urrentStyle?峰???峰??? 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.慰nl慰ad=function()
{
new ChangeSize("content","startWidth","startHeight");
}
</script>
<body>
<div class="content" id="content">
</div>
<button id="startWidth">寮?濮?(瀹藉害浼???)</button>
<button id="startHeight">寮?濮?(楂?搴????)</button>
</body>
</html>
![CSS预处理器——sass & less[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)