offsetWidth的缺点

原创 2017年01月03日 23:09:51
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;}
div{
width:100px;
height:100px;
background-color:yellowgreen;
border:2px solid red;
/*padding:5px;*/
float: left;
margin:10px;
/*position: absolute;*/
/*left:20px;
top:30px;*/
}
#div3{
/*IE9-11、火狐和谷歌用opacity*/
opacity: 0.5;  
/*IE用6-8的是filter*/
filter: alpha(opacity:50);
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oDiv3=document.getElementById('div3');
var oDiv4=document.getElementById('div4');
var oDiv5=document.getElementById('div5');
var oTxt1=document.getElementById('txt1');
//offsetWidth和offsetHeight,获取的都是对象的盒模型(宽、border、padding)
//offsetWidth=width+border+padding 
//offsetHeight=height+border+padding
//所以我们如果用obj.style.width,但是它只能获取行间的样式,不能获取非行间样式(即样式表里的样式)
//getStyle完全不考虑border、padding的大小
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];   // IE用
}else{
return getComputedStyle(obj,false)[name];   // 火狐和谷歌用
}
}
oDiv1.onmouseover=function(){
startMove(oDiv1,'height',200);
}
oDiv1.onmouseout=function(){
startMove(oDiv1,'height',100);
}
oDiv2.onmouseover=function(){
startMove(oDiv2,'width',200);
}
oDiv2.onmouseout=function(){
startMove(oDiv2,'width',100);
}
oDiv3.onmouseover=function(){
startMove(oDiv3,'opacity',100);
}
oDiv3.onmouseout=function(){
startMove(oDiv3,'opacity',50);
}
oDiv4.onmouseover=function(){
startMove(oDiv4,'fontSize',40);
}
oDiv4.onmouseout=function(){
startMove(oDiv4,'fontSize',18);
}
oDiv5.onmouseover=function(){
startMove(oDiv5,'borderWidth',20);
}
oDiv5.onmouseout=function(){
startMove(oDiv5,'borderWidth',1);
}
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=0;
var speed=0;
if(attr=='opacity'){
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
oTxt1.value=cur;
}else{
cur=parseInt(getStyle(obj,attr));
}
speed=(iTarget-cur)/6;  
speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
if(cur==iTarget){
clearInterval(obj.timer);
}else{
if(attr=='opacity'){
obj.style[attr]=(cur+speed)/100;
obj.style.filter='alpha:(opacity:'+(cur+speed)/100+')' ;
}else{
obj.style[attr]=(cur+speed)+'px';
}
}
},30);
}
}
</script>
</head>
<body>
<input type="text" name="txt1" " id="txt1" value="" />
<div id="div1">
变高
</div>
<div id="div2">
变宽
</div>
<div id="div3">
透明度
</div>
<div id="div4">
字体大小
</div>
<div id="div5">
边框
</div>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

scrollwidth和offsetwidth区别

  • 2010-02-08 10:27
  • 40KB
  • 下载

四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异 网页可见区域宽:d...

HTML中常见的各种位置距离(clientTop clientLeft clientWidth ClientHeight offsetleft offsettop offsetwidth offset

DOM中都有一些什么宽度、高度。 常见的 offsetWidth clientWidth scrollWidth offsetHeight clientHeight ...

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

 HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)