offset家族
2016-10-10 本文已影响0人
Jason_Pan
明明设置了width的值但是用js获取style.width的时候却为空，而offsetWidth不会
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background-color: red;
height: 50px;
width: 500px;
margin-top: 10px;
border: 1px solid #000;
padding: 10px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById('div');
alert(div.style.width);
alert(div.offsetWidth);
}
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
style.width || offsetwidth都返回自己的宽,,,, style.width的值为空是因为它只获取行内样式，而我们设置的是行间样式，所以为空，当我们设置行内样式时，它会弹出宽度，且是带有px的字符串。所以使用的时候要注意。offsetwidth = width + border + padding;
区别
1、style.width 可读可写 offsetleft 只可读
2、style.width 返回的是字符串 offsetwidth 返回的是数字
3、style.width 只获取行内样式 offsetwidth随便（最重要的区别）
4、只有定位的盒子才有style.left 而offsetLeft 可以返回没有定位盒子的距离左侧的位置
5、没有给HTML元素指定style.top样式，则style.top返回的是空字符。
offsetParent
返回改对象的父级（带有定位的）不一定是亲的
前面有个返回对象的父级（亲的）parentNode,当有多个父级元素定位时，返回最近的那个父级元素。
