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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

offsetwidth的用法

clientWidth与offsetWidth的区别scrollWidth: 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了会改变对象的实际度)。clientWidth :是对...
  • wushuang5566110
  • wushuang5566110
  • 2011年07月08日 23:39
  • 1242

offsetWidth和width的区别

1.offsetWidth属性可以返回对象的padding+border+width属性值之和,style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性,...
  • leledexixi
  • leledexixi
  • 2017年03月01日 14:52
  • 1374

JS运动之offsetWidth属性的小bug

JS运动之offsetWidth属性的小bug 大家对于offsetWidth属性是否真正了解呢????????它的值大小仅仅等于width的值吗???????接下看个小案例就明白了。      ...
  • u013064109
  • u013064109
  • 2015年03月18日 21:47
  • 1302

offsetHeight、offsetWidth、clientWidth、clientHeight无法获取值得问题

获取offsetWidth,和clientWidth的值时弹窗为0,在CSDN上询问了一下才明白了原因:在HTML的声明下,屏幕宽高是隐藏的,如果想要获得值,就需要在css中定义一下HTML和body...
  • zmx760102412
  • zmx760102412
  • 2017年04月15日 09:35
  • 1250

style.left,style.width与offsetLeft,offsetWidth、scrollLeft,scrollWidth的区别

1.offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置.offsetParent:布局中设置postion属性(Relative、Absolut...
  • mr_fzz
  • mr_fzz
  • 2016年11月04日 13:54
  • 1074

javascript 中 offsetWidth 是什么意思?

javascript 中 offsetWidth 是什么意思? 疯子哺栈3 | 浏览 30715 次  2013-11-06 12:10 2015-06-11 10:16 ...
  • evilcry2012
  • evilcry2012
  • 2016年10月24日 09:21
  • 236

CSS中关于:对象.OffsetWidth和对象.Style.width的区别

1.offsetWidth属性可以返回对象的padding+border+width属性值之和 style.width返回值就是定义的width属性值 2.offsetWidth属性仅是可读属性,...
  • ZuoMarsNiShang
  • ZuoMarsNiShang
  • 2016年12月05日 13:14
  • 1466

offsetWidth 值为 0 ,明明有值

__.offsetWidth = 0; 因为父集用了display:none; 所以取不到值,将父集设置为display: block;就行了...
  • qq_36892828
  • qq_36892828
  • 2017年12月08日 12:58
  • 59

点击按钮,缩放图片(img.width、img.style.width、img.offsetWidth)

前几天在慕课网上看到一个关于图片缩放的教学视频,因为当时对老师使用img.width,而不是使用img.style.width而感到奇怪,所以周末得空了,想来自己试着写出来,相关视频网址如下:http...
  • wuji3390
  • wuji3390
  • 2017年05月10日 20:20
  • 213

各种width,offsetWidth, getBoundingClientRect(), clientWidth,scrollWidth区别

各种width,offsetWidth, getBoundingClientRect(), clientWidth,scrollWidth区别 搬运自https://developer.mozil...
  • X_Jagger
  • X_Jagger
  • 2017年05月31日 23:34
  • 421
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:offsetWidth的缺点
举报原因:
原因补充:

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