客户区大小
客户区大小client指的是 元素内容及其内边距所占空间的大小。
clientWidth
返回元素客户区宽度。
clientWidth = padding-left + width+ padding-right
clientHeight
返回元素客户区的高度。
clientHeight = padding-top + height+ padding-bottom
<!docutype html>
<html>
<head>
<meta charset="utf-8">
<title>深入理解偏移量offset</title>
<style>
</style>
</head>
<body>
<div id="test1" style="position: relative;width: 200; height: 200; margin: 10; padding: 10; border: 1px solid red ">
<div id="test2" style="width: 100; height: 100; margin: 10; padding: 10; border: 1px solid red"></div>
</div>
<script>
var test2 = document.getElementById("test2");
//120 = 10 + 100 + 10
console.log(test2.clientWidth); //120
//120 = 10 + 100 + 10
console.log(test2.clientHeight); //120
</script>
</body>
</html>
注意:滚动条不计算在内。得出的结果没有计算滚动条的尺寸。
clientLeft
返回左边框的宽度。
clientTop
返回上边框的宽度。
<!docutype html>
<html>
<head>
<meta charset="utf-8">
<title>深入理解偏移量offset</title>
<style>
</style>
</head>
<body>
<div id="test1" style="position: relative;width: 200; height: 200; margin: 10; padding: 10; border: 1px solid red ">
<div id="test2" style="width: 100; height: 100; margin: 10; padding: 10; border: 1px solid red"></div>
</div>
<script>
var test2 = document.getElementById("test2");
console.log(test2.clientLeft); //1
console.log(test2.clientTop); //1
</script>
</body>
</html>
注意:当display设置为inline时,clientLeft和clientTop为0。
<body>
<div id="test1" style="position: relative;width: 200; height: 200; margin: 10; padding: 10; border: 1px solid red ">
<div id="test2" style="display: inline; width: 100; height: 100; margin: 10; padding: 10; border: 1px solid red"></div>
</div>
<script>
var test2 = document.getElementById("test2");
console.log(test2.clientLeft); //0
console.log(test2.clientTop); //0
</script>
</body>
当元素的display属性设置为inline时,它就具有了内联元素的特性,即在同一行上显示,也没有了border属性了。
页面大小
第一常用document.documentElement的client属性来表示页面大小(不包括滚动条宽度)。
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
第二常用window.innerWidth和window.innerHeigth来表示页面大小。(包括滚动条宽度)
这两个属性表示的是浏览器窗口大小减去菜单栏、地址栏所剩余的尺寸,由于滚动条属于页面,所以包括滚动条的宽度。
注意事项:
客户区尺寸需要注意的与偏移量所要注意的一样。