浅谈offsetleft与left系列的区别

来源：互联网发布：linux 用户组权限编辑：程序博客网时间：2024/06/05 16:40

在复习javascript运动框架的过程中，又遇到了offset属性，之前一直比较模糊的一个知识点，今天各方查阅资料总算有了一个比较清楚地认识，特来道一道其中真谛！

首先来一段代码测试测试！

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>未定义</title><style type="text/css"> div{   width:100px;   height:100px;   border:5px solid red;   background-color:green;   padding:3px; } </style> <script type="text/javascript"> window.onload=function(){  <span style="color:#6600cc;"><strong>  console.log(document.getElementById("mytest").offsetWidth);   console.log(document.getElementById("mytest").style.width);</strong> </span>} </script> </head> <body> <div id="mytest"></div> </body> </html>

以上代码中，offsetWidth属性可以返回div的宽度，但是style.width并不能够返回此div的宽度。（因为在js中不能直接把获取写在样式表中的样式）

由运行结果也可以看出offsetWidth返回的宽度值包括:border+width+padding

但是如果把样式加载行内，就可以读取到了

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script>window.onload=function(){var oDiv=document.getElementById('div1');var a=oDiv.style.width;alert(typeof a);alert(a);}</script></head><body><div id="div1" style="width:200px"></div></body></html>

显示结果：

相信大家也看出来了，width这样读取出来的不是一个数值，而是一个字符串，并且带有单位，但是offsetwidth返回的是一个数值。

这应该是两者在本质上的一个区别，还有在网上之前又看到过一种说法：

object.offsetLeft代表是当前object和父元素已经定义好的左边距。

object.style.left代表是object和父元素需要定义的左边距

不知道可不可以这样理解：offsetLeft是已经有的值，而left是需要计算的值，因此在运动框架的联系中经常看到的是将offsetLeft的值赋给left~~~

接下来一张图说明两者表象上的区别：

点击打开链接 offsetwidth和style.width的区别是什么

点击打开链接浅析offsetLeft,Left,clientLeft之间的区别

0 0