问个问题希望高手解答下万分感谢啊-慕课网

问个问题希望高手解答下万分感谢啊

来源：1-3 实例JS+DOM

慕姐4424294

2015-10-12 15:05

有高手解释下么 offsetWdith和 style.width 之间的区别么为什么老师的单张图片 var imgWidth=imgs[0].offsetWidth 而不是用imgs[0].style.width呢？？？可以告诉我下么新手谢谢啊

写回答关注

2回答

zavven

2015-10-12 17:37:32

已采纳
楼上回答不完善。offsetWidth获取的是元素盒子模型的宽度，
即：offsetWidth = width + padding left + padding right + border left + border right；
style.width = width。
例子（借用楼上的例子1）：
```
<!DOCTYPE html>
<html>
<head>
<title> new document </title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
</head> 
<body> 
  <div style="width:100px;height:100px;padding:10px;border:5px solid #000;"></div>
<script type="text/javascript">
  alert(document.getElementsByTagName("div")[0].offsetWidth)    //130
  alert(document.getElementsByTagName("div")[0].style.width)    //100px
</script>
</body>
</html>
```
同理，offsetHeight 和 style.height 的区别是一样的。
1 2

慕姐4424...

那个还想问下 offsetLeft 和style.left 之间的关系老师带面里面用过我看了之后有点一知半解的可以详细解释下么？

2015-10-13 09:27:39

共 1 条回复 >

sevencuijian: 2015-10-12 16:43:13

offsetWdith和 style.width都是获取元素的宽度，但是还是有区别的。

offsetWidth在任何情况再都可以获取元素的宽度，但是style.width只有在元素有内联样式且样式包含宽度的时候才可以获取到宽度的值，而且前者输出是不带单位的，后者输出是带单位的。

例子1：

<!DOCTYPE html>
<html>
<head>
<title> new document </title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
</head> 
<body> 
  <div style="width:100px;height:100px;"></div>
<script type="text/javascript">
  alert(document.getElementsByTagName("div")[0].offsetWidth)    //100
  alert(document.getElementsByTagName("div")[0].style.width)    //100px
</script>
</body>
</html>

例子2：

<!DOCTYPE html>
<html>
<head>
<title> new document </title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
<style>
div{width:100px;height:100px;}
</style>
</head> 
<body> 
  <div></div>
<script type="text/javascript">
  alert(document.getElementsByTagName("div")[0].offsetWidth)    //100
  alert(document.getElementsByTagName("div")[0].style.width)    //输出为空
</script>
</body>
</html>

希望对你有帮助！

1 2

慕姐4424...

谢谢你

2015-10-13 09:30:18

共 1 条回复 >

DOM探索之基础详解篇

要知道前端大牛都是从精通DOM开始的，全面讲解DOM的基础知识

98372 学习 · 238 问题

查看课程

相似问题

谁能帮我解答一下