WebAPI-client系列属性

最新推荐文章于 2024-08-15 09:24:05 发布

原创最新推荐文章于 2024-08-15 09:24:05 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

WebAPI 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了Web API中client系列属性，包括clientWidth、clientHeight、clientLeft和clientTop，这些属性用于动态获取元素可视区的尺寸信息，如边框大小、元素宽度和高度等。属性返回值为数字，不包含单位。

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>

在这里插入图片描述

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>