zoukankan      html  css  js  c++  java
  • 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 {
       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 {
         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 {
         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的元素,可以把值保存到变量中
    优秀文章首发于聚享小站,欢迎关注!
  • 相关阅读:
    HAProxy、Keepalived 在 Ocatvia 的应用实现与分析
    Octavia 的 HTTPS 与自建、签发 CA 证书
    Octavia 创建 loadbalancer 的实现与分析
    OpenStack Rally 质量评估与自动化测试利器
    自建 CA 中心并签发 CA 证书
    Failed building wheel for netifaces
    通过 vSphere WS API 获取 vCenter Datastore Provisioned Space 置备空间
    OpenStack Placement Project
    我们建了一个 Golang 硬核技术交流群(内含视频福利)
    没有图形界面的软件有什么用?
  • 原文地址:https://www.cnblogs.com/yesyes/p/15352425.html
Copyright © 2011-2022 走看看