offsetWidth、clientWidth、scrollWidth如何计算

先贴一下测试用html，很简单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{height: 100px;width: 300px;padding: 10px;border: 5px solid black;outline: yellow solid 5px;/* overflow-y: scroll; */}span{/*display:block;width: 100px;*/padding: 10px;border: 1px solid black;}</style>
</head>
<body><div>This is a div.<br/>hahahhahahahahahahahahahahahahahahahahahahahahahahahahahahah<br/>Test Content.<br/>Test Content.<br/>Test Content.<br/>Test Content.<br/></div><span>This is a span.</span><script>let div = document.getElementsByTagName("div")[0];let span = document.getElementsByTagName("span")[0];console.log(`div的offsetWidth${div.offsetWidth}`);console.log(`span的offsetWidth${span.offsetWidth}`);console.log(`div的clientWidth${div.clientWidth}`);console.log(`span的clientWidth${span.clientWidth}`);console.log(`div的scrollWidth${div.scrollWidth}`);console.log(`span的scrollWidth${span.scrollWidth}`);</script>
</body>
</html>

offsetWidth

MDN的解释:The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element’s offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width. If the element is hidden (for example, by style.display on the element or one of its ancestors to “none”), then 0 is returned.

大致意思是说offsetWidth包含border、padding、scrollbar和css width
实际测试：
块级元素offsetWidth=border+padding+CSS width(已包含scrollbar)
行内元素offsetWidth=border+padding+CSS width(已包含scrollbar)
clientWidth

MDN的解释：The Element.clientWidth property is zero for elements with no CSS or inline layout boxes, otherwise it’s the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.

大致意思是说clientWidth包含padding、css width但是不包含scrollbar，且行内元素的clientWidth为0
实际测试：
块级元素clientWidth=CSS width + padding-scrollbar
行内元素clientWidth=0
scrollWidth

MDN的解释：The Element.scrollWidth read-only property is a measurement of the width of an element’s content, including content not visible on the screen due to overflow.
The scrollWidth value is equal to the minimum width the element would require in order to fit all the content in the viewport without using a horizontal scrollbar. The width is measured in the same way as clientWidth: it includes the element’s padding, but not its border, margin or vertical scrollbar (if present). It can also include the width of pseudo-elements such as ::before or ::after. If the element’s content can fit without a need for horizontal scrollbar, its scrollWidth is equal to clientWidth

大致意思是说scrollWidth包含content超出部分的宽度，包含padding但不包含scrollbar
实际测试：
块级元素scrollWidth有垂直方向滚动条时的值要大于无垂直方向滚动条时的值（）
行内元素scrollWidth=0

这三个属性的都会对值进行四舍五入

This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

offsetWidth、clientWidth、scrollWidth如何计算相关推荐

JS中的offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset
value description offsetWidth 返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) offsetHeight 返回元素的高度(包括元素高度.内边距和边框,不包括外边 ...
四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异...
转自http://blog.163.com/chudaozhe@126/blog/static/1157323432011626112137928/ 网页可见区域宽:document.body.cli ...
js获取屏幕尺寸、clientWidth、offsetWidth、scrollWidth等区别
js获取元素/屏幕宽高总结如下 1.获取网页可视区域宽高(随着页面的缩放,所获取的值会相应改变) 方法一.不包括滚动条的宽高在内 document.documentElement.clientWid ...
JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.b ...
各种边距clientWidth、offsetWidth、scrollWidth、clientLeft、getBoundingClientRect详解
1.clientWidth.offsetWidth.scrollWidth <!DOCTYPE html> <html><head><meta charset ...
offsetwidth/clientwidth的区别
offsetwidth/clientwidth的区别 clientWidth是对象看到的宽度(不含边线,即border) scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间 ...
关于Element中的clientWidth,scrollWidth,offsetWidth等属性详解
2019独角兽企业重金招聘Python工程师标准>>> client-属性 clientWidth,clientHeight 只读属性,表示一个元素的**可见区域**宽高,以像素计单 ...
JS中关于clientWidth、offsetWidth、scrollWidth
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别
首先定义一个div. 然后稍微装修一下下面开始区分一.clientWidth和clientHeigh . clientTop和clientLeft 1,clientWidth的实际宽度 clien ...

offsetWidth、clientWidth、scrollWidth如何计算

offsetWidth、clientWidth、scrollWidth如何计算

offsetWidth、clientWidth、scrollWidth如何计算相关推荐

最新文章

热门文章