【Web APIs】元素可视区 client 系列属性 ( client 属性简介 | 常用的 client 属性 | 使用场景 | 代码示例 )

文章目录

• [一、元素可视区 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、 代码示例

<!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、 执行结果