大家好,又见面了,我是你们的朋友全栈君。
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
时,边框,边距或滚动条(如果存在)被排除在外
<div id="foo">
Hello World
</div>
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 <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
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
!
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
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/163041.html原文链接:https://javaforall.cn