width 与 offsetWidth 的区别

最新推荐文章于 2019-08-09 13:39:15 发布

单枪匹马跑天下

最新推荐文章于 2019-08-09 13:39:15 发布

阅读量616

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_41170620/article/details/89384001

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

比较width 与 offsetWidth 的区别
1、offsetWidth >= width
offsetWidth = width + padding + border；

2、offsetWidth 属性仅仅可读，而style.width 是可写的；
所以通常用 style.width用作进JavaScript中设置元素的宽度，而offsetWidth不可以。

3、offsetWidth 属性返回值是整数，如果实际值是小数，会根据实际值进行四舍五入操作，返回处理后的整数。width=44.499px；输出结果为49；
width=44.5px；输出结果为45；
而style.width的返回值是字符串，并且带有单位
width=44.499px；输出结果为44.499px；

4、style.width仅仅能返回以style方式定义的内部样式表的width属性值。
因此样式写在行内的时候<div id="box" style="width:100px">，用style.width或者offsetWidth都可以获取元素的宽度；
如果写在css样式表中的时候，.box{width:100px;}，此时只能用offsetWidth来获取元素的宽度，而style.width所返回的值为空
但是也不绝对

例如

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
<style type="text/css">
   div{
       position: absolute;
       background: red;
       width: 10px;
       height: 10px;
   }
</style>
<script type="text/javascript">
window.onload = function(){
   var oDiv = document.getElementsByTagName('div');
   document.onmousemove = function(ev){
   // var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
   // var oScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
   // 这个地方用的是style.left而不是offsetLeft.
       var oEvent = ev || event;
       for (var i = oDiv.length -1 ; i > 0; i--) {

           // oDiv[i].style.left = oDiv[i-1].offsetLeft +'px' ;
           // oDiv[i].style.top = oDiv[i-1].offsetTop + 'px' ;
           oDiv[i].style.left = oDiv[i-1].style.left ;
           oDiv[i].style.top = oDiv[i-1].style.top ;
           console.log(oDiv[i].style.top)
       }
       oDiv[0].style.left = oEvent.clientX +'px';
       oDiv[0].style.top = oEvent.clientY +'px';
   }
}
</script>
</head>
<body>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</body>
</html>