JavaScript之深入理解客户区尺寸client

来源：互联网发布：炫踪网络b轮融资编辑：程序博客网时间：2024/04/28 19:00

客户区大小

客户区大小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来表示页面大小。（包括滚动条宽度）

这两个属性表示的是浏览器窗口大小减去菜单栏、地址栏所剩余的尺寸，由于滚动条属于页面，所以包括滚动条的宽度。

注意事项：

客户区尺寸需要注意的与偏移量所要注意的一样。

偏移量offset知识

1 0