offset家族

明明設置了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,當有多個父級元素定位時,返回最近的那個父級元素。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容