WebAPI-client系列属性

缺乏、安全感 2023-06-19 13:26 12阅读 0赞

client 翻译过来就是“客户端”的意思，通过 client 系列的相关属性可以动态的获取元素可视区的相关信息比如：元素的边框大小、元素大小等；通过该系列的属性获取的值是数字类型，没有单位。

### clientWidth ###

`element.clientWidth` 该属性用于获取元素的内部宽度；该属性包括内容宽和内边距，不包含垂直滚动条（如果有）、边框和外边距。

### clientHeight ###

`element.clicentHeight` 获取元素内部的高度，是只读属性，包含内边距和内容宽，但不包括水平滚动条、边框和外边距。

CSS：

* { 
       margin: 0;
       padding: 0;
     }
    .box { 
      width: 300px;
      height: 200px;
      background: skyblue;
    }
    
    .content { 
      width: 200px;
      padding: 10px;
      height: 100px;
      border: 5px solid red;
    }

HTML：

<div class="box">
      <div class="content"></div>
    </div>
    
    <script> function $(selector) { return document.querySelector(selector) } console.log($('.content').clientWidth) // 220 console.log($('.content').clientHeight) // 120 </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

### clientLeft ###

`element.clientLeft` 该属性用于获取元素的左边框宽度，如果有滚动条则该属性包括滚动条的宽度。

### clientTop ###

`element.clientTop` 获取元素顶部边框的宽度

CSS：

* { 
      margin: 0;
      padding: 0;
    }
    .box { 
      width: 300px;
      height: 200px;
      background: skyblue;
      border: 1px solid gray;
    }
    
    .content { 
      width: 200px;
      height: 100px;
      padding: 10px;
      margin: 20px;
      border-left: 5px solid red;
      border-top: 10px solid blue;
    }

HTML：

<div class="box">
      <div class="content"></div>
    </div>
    <script> function $(selector) { return document.querySelector(selector) } console.log('border-lefts', $('.content').clientLeft) // 5 console.log('border-top', $('.content').clientTop) // 10 </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191207083344898.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019120708485868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70