offsetleft
在复习javascript运动框架的过程中，又遇到了offset属性，之前一直比较模糊的一个知识点，今天各方查阅资料总算有了一个比较清楚地认识，特来道一道其中真谛！
首先来一段代码测试测试！
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>未定义</title>
<style type="text/css">
p{
width:100px;
height:100px;
border:5px solid red;
background-color:green;
padding:3px;
}
</style>
<script type="text/JavaScript">
window.οnlοad=function(){
<span style="color:#6600cc;"><strong> console.log(document.getelementbyid("mytest").offsetwidth);
console.log(document.getElementById("mytest").style.width);</strong> </span>
}
</script>
</head>
<body>
<p id="mytest"></p>
</body>
</html>以上代码中，offsetWidth属性可以返回p的宽度，但是style.width并不能够返回此p的宽度。（因为在js中不能直接把获取写在样式表中的样式）
由运行结果也可以看出offsetWidth返回的宽度值包括:border+width+padding
但是如果把样式加载行内，就可以读取到了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.οnlοad=function()
{
var oDiv=document.getElementById('p1');
var a=oDiv.style.width;
alert(typeof a);
alert(a);
}
</script>
</head>
<body>
<p id="p1" style="width:200px"></p>
</body>
</html>相信大家也看出来了，width这样读取出来的不是一个数值，而是一个字符串，并且带有单位，但是offsetwidth返回的是一个数值。
这应该是两者在本质上的一个区别，还有在网上之前又看到过一种说法：
object.offsetleft代表是当前object和父元素已经定义好的左边距。
object.style.left代表是object和父元素需要定义的左边距
不知道可不可以这样理解：offsetLeft是已经有的值，而left是需要计算的值，因此在运动框架的联系中经常看到的是将offsetLeft的值赋给left~~~
接下来一张图说明两者表象上的区别：
点击打开链接 offsetwidth和style.width的区别是什么
点击打开链接 浅析offsetLeft,Left,clientLeft之间的区别
文章最后发布于: 2016-03-14 20:47:55
相关阅读
1、scanf()不会检查输入边界，可能造成数据溢出； scanf_s()会进行边界检查。 2、比如输入name[5]，scanf("%s",name)，如果输入wangsicon
C#—StreamWriter、StreamReader和FileStream区别
本文主要讲解一下在文件的读取中，StreamWriter、StreamReader和FileStream分别有什么样的不同，废话少说，直接进入主题。一、StreamRe
骁龙855和骁龙855Plus有什么区别 骁龙855值得换骁龙85
近日，网上曝光了疑似骁龙865移动平台的Geekbench跑分，跑分显示其单核性能为4160分，多核性能为12946分，性能比时下高通最强的骁龙855 P
每次点击京东商城，都会被京东里各色各样的活动吸引，特别是京东秒杀活动，更让人心动不已。抢到就是赚到，但秒杀的商品逼近有限，很多时候
RTSP、 RTMP、HTTP的共同点、区别共同点：1：RTSP RTMP HTTP都是在应用应用层。2： 理论上RTSP RTMPHTTP都可以做直播和点播，但一般做直