http://my.oschina.net/u/1992917/blog/410403
scrollWidth
是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)。
clientWidth
是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。
offsetWidth
是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
一个scrollWidth和clientWidth的例子:
<html>
<head>
<title>77.htm文件</title>
</head>
<body>
<textarea wrap="off" onfocus="alert('scrollWidth:'+this.scrollWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
在文本框内输入内容,当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。当一行内容超出文本框的宽度,就有横向滚动条出来了,scrollWidth的值就变了。
scrollWidth是对象实际内容的宽度。
clientWidth是对象看到的宽度(不含边线),这个例子里不会改变。
一个clientWidth和offsetWidth的例子:
<html>
<head>
<title>77.htm文件</title>
</head>
<body>
<textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
offsetWidth的值总是比clientWidth的值大。
clientWidth是对象看到的宽度(不含边线)
offsetWidth是对象看到的宽度(含边线,如滚动条的占用的宽)
分享到:
相关推荐
scrollWidth,clientWidth与offsetWidth的区别
主要介绍了scrollWidth,clientWidth,offsetWidth的区别,需要的朋友可以参考下
图示offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性,对于一些页面的控制很有帮助。
JavaScript属性scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解,实例修正版。
关于js中的offsetWidth、clientWidth、scrollWidth等一系列属性及其方法一直都傻傻分不清,这里就来总结一下这些方法的用法和含义。 一、clientWidth和clientHeigh 、 clientTop和clientLeft 1,clientWidth的实际...
1. 正确理解offsetWidth、clientWidth、scrollWidth及相应的height属性 假设某一个元素的横纵向滚动条都拖动到最末端,则offsetWidth、clientWidth、scrollWidth等属性相应的范围如下图所示: 1)offsetWidth ,...
四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth_和_scrollWidth_的解
scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解 2009年12月14日,16:58:19 | ArthurXF scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的...
父元素与子元素的scrollWidth/offsetWidth/clientWidth
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽); 网页可见区域高: document.body....
有时候项目中会用到用js获取元素位置来定位元素,首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系。 JS获取各种宽度、高度的简单介绍: scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取...
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括...
scrollWidth,clientWidth,offsetWidth的区别 offsetX,clientX,pageX的辨析 下载源码链接 代码实例 <div id=box xss=removed></div> (function () { var dragging = false var boxX, boxY, mouseX, mouseY, ...
IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。 上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想...
网页可见区域宽: 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