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

最新推荐文章于 2023-04-03 00:38:29 发布

「已注销」

最新推荐文章于 2023-04-03 00:38:29 发布

阅读量739

点赞数 1

分类专栏： Javascript学习笔记

本文链接：https://blog.csdn.net/h15882065951/article/details/70147428

版权

Javascript学习笔记专栏收录该内容

64 篇文章 3 订阅

订阅专栏

客户区大小

客户区大小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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之深入理解客户区尺寸client

客户区尺寸client深入理解。
复制链接

扫一扫

专栏目录