大家好，又见面了，我是你们的朋友全栈君。
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, 100How 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 === 100Let’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:
clientWidthandclientHeightdoes NOT work with inline HTML elements (likespan,em, ora). It’ll just return0!块级 ：
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
clientWidth and clientHeight are supported on all major desktop and mobile browsers.
所有主要的台式机和移动浏览器均支持clientWidth和clientHeight 。
See the official W3C specs for detailed information about clientWidth and clientHeight.
有关clientWidth和clientHeight详细信息，请参见W3C官方规范。
翻译自: https://www.digitalocean.com/community/tutorials/js-clientwidth-and-clientheight
clientwidth
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/163041.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
