问个问题 希望 高手 解答下 万分感谢啊
有 高手 解释下么 offsetWdith和 style.width 之间的区别么 为什么老师的 单张图片 var imgWidth=imgs[0].offsetWidth 而不是用imgs[0].style.width呢？？？可以 告诉我下么 新手 谢谢啊
2 回答
楼上回答不完善。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 的区别是一样的。
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>希望对你有帮助！
举报
0/150
提交
取消
