JavaScript中的clientWidth和clientHeight

使用 clientWidth 和 clientHeight 您可以获得 HTML 元素的像素尺寸。尺寸是使用 HTML 元素内的内容尺寸以及填充来计算的。

注意：计算clientWidth和clientHeight时，不包括边框、边距或滚动条（如果存在）

使用 clientWidth 和 clientHeight

<div id="foo">
  Hello World
</div>

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

学习练习

作为练习，尝试计算以下 HTML 元素的 clientWidth 和 clientHeight 的值：

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

它是如何计算的？ 添加填充，内容在 HTML 元素内，忽略边距和边框：

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

让我们尝试另一个！尝试计算此 HTML 元素的 clientWidth 和 clientHeight：

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

笔记

块级：clientWidth 和 clientHeight 不适用于内联 HTML 元素（如 span、em 或 a）。它只会返回 0！
四舍五入值：值四舍五入到最接近的整数。如果您需要更精确的值，请使用 getBoundingClientRect()
Read-Only：您不能分配新值来更改 HTML 元素的尺寸。例如这不做任何事情：someElement.clientWidth = 30

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

有关 clientWidth 和 clientHeight 的详细信息，请参阅官方 W3C 规范。