JS之DOM篇-client客户区

客户区大小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的元素，可以把值保存到变量中