scrollWidth,offsetWidth,clientWidth的本质区别
1).element.scrollWidth (只读)
总结
scrollWidth是指元素内容的宽度或元素本身的宽度(元素本身的宽度比元素内容的宽度更大).若元素比它的内容更宽,如出现水平滚动条时),scrollWidth > clientWidth.
scrollWidth is a read–only property that returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater. If the element is wider than its content area (for example, if there are scroll bars for scrolling
through the content), the scrollWidth is larger than the clientWidth.
语法
var xScrollWidth = element.scrollWidth;
例子
<div id="aDiv" style="width: 100px; height: 200px; overflow: auto;">-FooBar-FooBar-FooBar</div>
<br />
<input type="button" value="Show scrollWidth" onclick="alert(document.getElementById('aDiv').scrollWidth);">
详述
The CSSOM View Module defines scrollWidth
2).element.offsetWidth (只读)
总结
返回元素的布局宽度(the layout width of an element)
Returns the layout width of an element.
语法
var offsetWidth = element.offsetWidth;
描述
一个元素的offsetWidth包含元素的borders,元素的水平padding,若出现垂直滚动条,则也包含元素的垂直滚动条的宽度,以及元素的样式width.
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.
例子
padding-top
Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines
for you.
All Birmans have colorpointed features, dark coloration of the face,
ears, legs and tail.
Cat image and text coming fromwww.best-cat-art.com
padding-bottom
LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom
详述
offsetWidth是MSIE的DHTML模型的一部分,并不是W3C草案或技术推荐.
3).element.clientWidth (只读)
总结
clientWidth是元素的内宽度,它包括元素的内边距,但是不包括垂直滚动条的宽度(即使出现滚动条), 也不包括元素的边框和外边距.
clientWidth is the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.
语法
var intElemClientWidth = element.clientWidth;
例子
Example
padding-top
Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines
for you.
All Birmans have colorpointed features, dark coloration of the face,
ears, legs and tail.
Cat image and text coming fromwww.best-cat-art.com
padding-bottom
LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom
详述
clientWidth并不是W3C草案的内容,它是由MSIE DHTML 推荐的.
原文:
https://developer.mozilla.org/en/DOM/element.scrollWidth
https://developer.mozilla.org/en/DOM/element.offsetWidth
https://developer.mozilla.org/en/DOM/element.clientWidth
参考及相关阅读
MSDN: scrollWidth PropertyMSDN: offsetWidth PropertyMSDN: clientWidth definitionMSDN: Measuring Element Dimension and LocationDOM:element.scrollWidthDOM:element.offsetWidthDOM:element.clientWidthDetermining the dimensions of elements
分享到:
相关推荐
scrollWidth,clientWidth与offsetWidth的区别
JavaScript属性scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
主要介绍了scrollWidth,clientWidth,offsetWidth的区别,需要的朋友可以参考下
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解,实例修正版。
图示offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性,对于一些页面的控制很有帮助。
关于js中的offsetWidth、clientWidth、scrollWidth等一系列属性及其方法一直都傻傻分不清,这里就来总结一下这些方法的用法和含义。 一、clientWidth和clientHeigh 、 clientTop和clientLeft 1,clientWidth的实际...
父元素与子元素的scrollWidth/offsetWidth/clientWidth
scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解 2009年12月14日,16:58:19 | ArthurXF scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的...
有时候项目中会用到用js获取元素位置来定位元素,首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系。 JS获取各种宽度、高度的简单介绍: scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取...
四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth_和_scrollWidth_的解
1. 正确理解offsetWidth、clientWidth、scrollWidth及相应的height属性 假设某一个元素的横纵向滚动条都拖动到最末端,则offsetWidth、clientWidth、scrollWidth等属性相应的范围如下图所示: 1)offsetWidth ,...
IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。 上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想...
scrollWidth,clientWidth,offsetWidth的区别 offsetX,clientX,pageX的辨析 下载源码链接 代码实例 <div id=box xss=removed></div> (function () { var dragging = false var boxX, boxY, mouseX, mouseY, ...
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽); 网页可见区域高: document.body....
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括...
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果...offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clientLeft scrollLeft offsetTop clientT
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线...