javascript——DOM之元素的宽高
元素的width和height
style.width : 样式宽
clientWidth : 可视区宽
offsetWidth : 占位宽
style.height: 样式高
clientHeight: 可视区高
offsetHeight: 占位高
HTML部分:
<body> <div id="div1" style="width: 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
};