JS之DOM篇-client客户区

客户区大小client指的是元素内容及其内边距所占据的空间大小

JS之DOM篇-client客户区

客户区大小

和客户区大小相关的属性有四个:clientHeight、clientWidth、clientTop和clientLeft

clientHeight

clientHeight属性返回元素节点的客户区高度

clientHeight = padding-top + height + padding-bottom

clientWidth

clientWidth = padding-left + width + padding-right
<style>
#test {
  width: 100px;
  height: 100px;
  background: teal;
  border: 5px solid red;
  padding: 10px 20px;
  margin: 10px 20px;
}
</style>
 <div id="test"></div>
<script>
  console.log(test.clientHeight) // 120
  console.log(test.clientWidth) // 140
</script>

注意: 滚动条的宽度和高度不计算在内

<style>
  #test {
    width: 100px;
    height: 100px;
    background: teal;
    border: 5px solid red;
    padding: 10px 20px;
    margin: 10px 20px;
    overflow: scroll; /* 滚动 */
  }
</style>
 <div id="test">文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
<script>
  // 滚动条的宽度为17px
  console.log(test.clientHeight) // 103
  console.log(test.clientWidth) // 123
</script>

clientLeft

clientLeft属性返回左边框的宽度

clientTop

clientTop属性返回上边框的宽度

<style>
  #test {
    width: 100px;
    height: 100px;
    background: teal;
    border: 5px solid red;
    padding: 10px 20px;
    margin: 10px 20px;
    overflow: scroll;
  }
</style>
 <div id="test"></div>
<script>
  console.log(test.clientTop) // 5
  console.log(test.clientLeft) // 5
</script>

页面大小

通常使用document.documentElement的client属性来表示页面大小(不包含滚动条宽度),另外也可以使用window.innerHeight和innerWidth属性表示页面大小(包含滚动条宽度)。如果没有滚动条,这两个属性的值一样

console.log(document.documentElement.clientWidth, window.innerWidth) // 857 857
console.log(document.documentElement.clientHeight, window.innerHeight) // 635 635

注意: 在移动端,innerWidth和innerHeight表示的是视觉视口,即用户正在看到的网站的区域;而document.documentElement.clientWidth和clientHeight表示的是布局视口,指CSS布局的尺寸

注意事项

  1. 所有client属性都是只读的
  2. 设置了display:none;的元素,client属性为0
  3. 每次访问client属性都会重新计算。出于性能考虑,对于需要重复计算client的元素,可以把值保存到变量中
上一篇:2021-12-30数组链表day8


下一篇:Java 遇到的困难