JavaScript 中的客户端宽度和客户端高度

使用clientWidth和clientHeight,你可以获得HTML元素的像素尺寸,这些尺寸是使用HTML元素内部的内容尺寸计算的,以及插件。

<$>[注] 注:计算clientWidth和clientHeight 时不包括边界、边界或滚动栏(如果存在)

使用 clientWidth 和 clientHeight

1<div id="foo">
2  Hello World
3</div>

1const clientWidth = document.querySelector('#foo').clientWidth;
2const clientHeight = document.querySelector('#foo').clientHeight;

学习练习

作为练习,尝试计算下面的 HTML 元素的 clientWidth 和 clientHeight 的值:

clientwidth clientheight example 1

1/**********************************************
2 **  If the HTML element is <div id="foo"/>  **
3 **********************************************/
4const clientWidth = document.querySelector('div#foo').clientWidth;
5const clientHeight = document.querySelector('div#foo').clientHeight;
6console.log(clientWidth, clientHeight);
7// --> 200, 100

**它是如何计算的?**添加插件,在HTML元素中的内容,忽略边界和边界:

clientwidth clientheight example 2

1(10 + 50) + 140   // clientWidth === 200
2(30) + 70         // clientHeight === 100

让我们再试一试!尝试计算这个HTML元素的clientWidth和clientHeight:

clientwidth clientheight example 3

1(10 + 10) + 230   // clientWidth === 250
2(30 + 20) + 70    // clientHeight === 120

笔记

区块级别:‘clientWidth’和‘clientHeight’ 不会与线性 HTML 元素(如‘span’、‘em’ 或‘a’)一起工作。它只会返回‘0’!
圆值:值被圆到最接近的整数。如果您需要更精确的值,请使用 getBoundingClientRect()
只读:您无法分配新的值来改变 HTML 元素的尺寸。

clientWidth和clientHeight在所有主要的桌面和移动浏览器上都支持。

请参阅 W3C 官方规格,了解有关 clientWidth和 clientHeight的详细信息。