浅谈offsetleft与left系列的区别_offsetleft与left区别-CSDN博客

本文链接：https://blog.csdn.net/github_33261002/article/details/50889689

本文探讨了JavaScript中的offsetLeft和left属性的区别。offsetLeft返回元素与父元素已定义的左边距，是一个数值；而left是需要计算的左边距，通常用于动态设置。offsetWidth包括border、width和padding，返回数值，而width返回带有单位的字符串。在运动框架中，常将offsetLeft赋值给left进行动画处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在复习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.ο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> 
<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.οnlοad=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~~~

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