clientwidth_JavaScript中的clientWidth和clientHeight[通俗易懂]

全栈程序员站长

发布于 2022-09-16 13:25:22

3400

发布于 2022-09-16 13:25:22

大家好，又见面了，我是你们的朋友全栈君。

clientwidth

Using clientWidth and clientHeight you’re able to get the pixel dimensions of an HTML element. The dimensions are calculated using the dimensions of content inside the HTML element, along with the padding.

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

Note: Borders, margins, or scrollbars (if present) are excluded when computing clientWidth and clientHeight

注意：计算clientWidth和clientHeight时，边框，边距或滚动条(如果存在)被排除在外

使用clientWidth和clientHeight (Using clientWidth and clientHeight)

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

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

学习练习 (Learning Exercises)

As an exercise, try calculating the value of clientWidth and clientHeight of the following HTML element:

作为练习，请尝试计算以下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

How was it calculated? Add the padding, with the content inside the HTML element, and ignore the margins and borders:

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

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

Let’s try another! Try calculating the clientWidth and clientHeight of this HTML element:

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

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

笔记 (Notes)

Block-level: clientWidth and clientHeight does NOT work with inline HTML elements (like span, em, or a). It’ll just return 0! 块级： clientWidth和clientHeight不适用于内联HTML元素(例如span ， em或a )。它只会返回0 ！
Rounded Values: Values are rounded to the nearest integer. If you need more precise values use getBoundingClientRect() 取整值：将值取整到最接近的整数。如果需要更精确的值，请使用getBoundingClientRect()
Read-Only: You can’t assign a new value to change the dimensions of the HTML element. For example this doesn’t do anything: someElement.clientWidth = 30 只读：您无法分配新值来更改HTML元素的尺寸。例如，这什么也不做： someElement.clientWidth = 30