本文共 2403 字,大约阅读时间需要 8 分钟。
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
时,边框,边距或滚动条(如果存在)被排除在外
Hello World
const clientWidth = document.querySelector('#foo').clientWidth;const clientHeight = document.querySelector('#foo').clientHeight;
As an exercise, try calculating the value of clientWidth
and clientHeight
of the following HTML element:
作为练习,请尝试计算以下HTML元素的clientWidth
和clientHeight
的值:
/********************************************** ** If the HTML element is ** **********************************************/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
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
取整值 :将值取整到最接近的整数。 如果需要更精确的值,请使用
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 and .
有关和详细信息,请参见W3C官方规范。
翻译自:
clientwidth
转载地址:http://bphgb.baihongyu.com/