明明設置了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的值為空是因為它只獲取行內(nèi)樣式,而我們設置的是行間樣式,所以為空,當我們設置行內(nèi)樣式時,它會彈出寬度,且是帶有px的字符串。所以使用的時候要注意。offsetwidth = width + border + padding;
區(qū)別
1、style.width 可讀可寫 offsetleft 只可讀
2、style.width 返回的是字符串 offsetwidth 返回的是數(shù)字
3、style.width 只獲取行內(nèi)樣式 offsetwidth隨便(最重要的區(qū)別)
4、只有定位的盒子才有style.left 而offsetLeft 可以返回沒有定位盒子的距離左側(cè)的位置
5、沒有給HTML元素指定style.top樣式,則style.top返回的是空字符。
offsetParent
返回改對象的父級(帶有定位的)不一定是親的
前面有個返回對象的父級(親的)parentNode,當有多個父級元素定位時,返回最近的那個父級元素。