文章目录
- [一、元素可视区 client 系列属性](#一、元素可视区 client 系列属性)
-
- [1、 client 属性简介](#1、 client 属性简介)
- [2、 常用的 client 属性](#2、 常用的 client 属性)
- [3、client 属性应用场景](#3、client 属性应用场景)
- [二、代码示例 - client 系列属性](#二、代码示例 - client 系列属性)
-
- [1、 代码示例](#1、 代码示例)
- [2、 执行结果](#2、 执行结果)
一、元素可视区 client 系列属性
1、 client 属性简介
client 系列属性 是 元素可视区 相关的 属性 , 是 用来 获取 DOM 元素 可视区域尺寸 和 边框偏移的 只读属性 , 只关注 元素本身的可视内容部分 , 不包含 滚动条、外边距 等 无关区域 ;
client 系列属性 返回值均为 数字类型 , 是 像素值 , 是开发中获取元素可视尺寸最常用的方式之一 ;
2、 常用的 client 属性
常用的 client 属性 :
| 属性名 | 含义 | 计算公式 ( 普通场景 ) |
|---|---|---|
clientWidth |
元素可视宽度 ( 内容区 + 左右内边距 ) , 不含边框、垂直滚动条、外边距 | 内容宽度 + 左右 padding - 垂直滚动条宽度 ( 如有 ) |
clientHeight |
元素可视高度 ( 内容区 + 上下内边距 ) , 不含边框、水平滚动条、外边距 | 内容高度 + 上下 padding - 水平滚动条高度 ( 如有 ) |
clientLeft |
元素左边框的宽度 ( 特殊场景：文字从右到左时可能包含滚动条宽度 ) | 左边框宽度 |
clientTop |
元素上边框的宽度 | 上边框宽度 |
client 系列属性 是 获取 元素可视区域 的 只读属性 , 返回像素数值 , 数字类型 ;
clientWidth / clientHeight 关注 " 内容 + 内边距 " 的可视尺寸 , 不含边框、滚动条、外边距 ;
clientLeft / clientTop 仅对应 元素左、上边框的宽度 ;
3、client 属性应用场景
client 属性应用场景 :
- 可视尺寸 : 动态计算元素可视尺寸 , 适配响应式布局 ;
- 判定可视 : 结合滚动事件 判断元素是否进入可视区域 ( 如懒加载 ) ;
- 容纳尺寸 : 计算 元素内可容纳的内容尺寸 , 避免内容溢出。
二、代码示例 - client 系列属性
1、 代码示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>client 系列属性示例</title>
<style>
#box {
width: 200px;
/* 内容宽度 */
height: 150px;
/* 内容高度 */
padding: 10px;
/* 上下左右内边距 */
border: 5px solid #333;
/* 边框宽度 */
margin: 8px;
/* 外边距 ( client属性不包含 ) */
overflow: auto;
/* 显示滚动条 , 验证滚动条对client的影响 */
}
</style>
</head>
<body>
<div id="box">
测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br> 测试内容
<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br> 测试内容
<br>测试内容<br>测试内容<br>测试内容<br>测试内容
</div>
<script>
// 获取元素
const box = document.getElementById('box');
// 打印client属性值 ( 不同浏览器滚动条宽度可能略有差异 , 如 : 17px )
// 计算过程 : 200 + 10 * 2 - 17 = 203 ( 内容 + padding - 垂直滚动条 )
// 输出 : clientWidth: 203
console.log('clientWidth:', box.clientWidth);
// 150 + 10 * 2 = 170 ( 无水平滚动条 , 直接内容 + padding )
// 输出 : clientHeight: 170
console.log('clientHeight:', box.clientHeight);
// 5 ( 左边框宽度 )
// 输出 : clientLeft: 5
console.log('clientLeft:', box.clientLeft);
// 5 ( 上边框宽度 )
// 输出 : clientTop: 5
console.log('clientTop:', box.clientTop);
</script>
</body>
</html>2、 执行结果
