javascript——DOM之元素的宽高

元素的width和height

style.width : 样式宽
clientWidth : 可视区宽
offsetWidth : 占位宽

style.height: 样式高
clientHeight: 可视区高
offsetHeight: 占位高

HTML部分:

<body>
    <div id="div1" style=" 100px; height: 100px; border: 1px solid red; padding: 10px; margin: 10px;"></div>
</body>

JS部分:

window.onload = function() {
    
    var oDiv = document.getElementById('div1');
    

    // alert( oDiv.style.width );    //100
    // alert( oDiv.clientWidth );    //样式宽 + padding    120
    // alert( oDiv.offsetWidth );    //样式宽 + padding + border  可视区宽 + 边框    122
    
    alert(oDiv.style.height);    //样式高100
    alert(oDiv.clientHeight);    //样式高 +padding 120
    alert(oDiv.offsetHeight);    //样式高 + padding + border 或者是可视区高+边框 122
    
};
原文地址:https://www.cnblogs.com/bokebi520/p/4312417.html