1, 平常都经常用 document.documentElement.clientWidth 或 document.documentElement.clientHeight 来获取页面的宽度和高度, 其实任何一个元素都有clientWidth 和clientHeight 属性,它的值等于,元素的宽度或高度+ padding的值,如果有滚动条,还要减去滚动条的宽度和高度。 比如一个div
1, 如果设置一个div 的宽度和高度,里面只有很少内容没有出现滚动条,那么这个div的clientWidth 和clientHeight 就是我们设置的width 和height。
<style> div { width: 300px; height: 100px; border: 1px solid blue; font: 30px arial; } </style>
<div> clientHeight/ clientWidth </div> <script> var div = document.getElementsByTagName("div")[0]; console.log(div.clientHeight); // 100 同style样式中设置的一致 console.log(div.clientWidth); // 300 同style样式中设置的一致 </script>
2, 如果同时给div元素设置了padding值, 那么div的clientWidth 和clientHeight就时 width + padding 和height + padding。
<style> div { width: 300px; height: 100px; padding: 20px; /*增加了padding 20px*/ border: 1px solid blue; font: 30px arial; } </style> console.log(div.clientHeight); // 140 width + padding *2 console.log(div.clientWidth); // 340 height + padding *2
3, 如果给div 设置overflow: auto,同时里面的内容特别多,出现滚动条, 这是clientWidth 和clientHeight就时 width + padding -滚动条的宽度 和height + padding-滚动条的高度。
<style> div { width: 300px; height: 100px; padding: 20px; /*增加了padding 20px*/ border: 1px solid blue; font: 30px arial; overflow: auto; } </style> <div> clientHeight/ clientWidth/clientHeight/ clientWidth clientHeight/ clientWidth/clientHeight/ clientWidth clientHeight/ clientWidth/clientHeight/ clientWidth clientHeight/ clientWidth </div> <script> var div = document.getElementsByTagName("div")[0]; console.log(div.clientHeight); // 123 width + padding *2 -滚动条的高度 console.log(div.clientWidth); // 323 height + padding *2 -滚动条的宽度
// 滚动条的默认宽度和高度是17px;
</script>
4, clientLeft/ clientTop: 他们指的是div 元素border 的宽度。 clientLeft 指的是border-left-width,clientTop 指的是 border-top-width;
div { width: 300px; height: 100px; border-style: solid; border-width: 30px 20px 10px 5px; } console.log(div.clientTop); // 30 console.log(div.clientLeft); // 5