网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
1、offsetWidth <iframe id="iframe_0.8513599177524824" style="border-width: initial; border-style: none; width: 20px; height: 20px;" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://www.zhufengpeixun.cn/b/static/image/smiley/default/sad.gif?_=2324131%22%20style=%22border:none;max-width:760px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.8513599177524824',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>width+padding+border)
当前对象的宽度。
style.width也是当前对象的宽度(width+padding+border)。
区别：1)style.width返回值除了数字外还带有单位px；
2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小，
style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值；
3)如果没有给 HTML 元素指定过 width样式，则 style.width 返回的是空字符串；
2、offsetHeight :(Height+padding+border)
当前对象的高度。
style.height也是当前对象的高度(height+padding+border)。
区别：1)style.height返回值除了数字外还带有单位px；
2)如对象的高度设定值为百分比高度,则无论页面变高还是变矮，
style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值；
3)如果没有给 HTML 元素指定过 height样式，则 style.height返回的是空字符串；
3、offsetLeft :
当前对象到其上级层左边的距离。
不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。
style.left当前对象到其上级层左边的距离。
区别：1)style.left返回值除了数字外还带有单位px；
2)如对象到其上级层左边的距离设定值为百分比，
style.left返回此百分比,而offsetLeft则返回到其上级层左边的距离的值；
3)如果没有给 HTML 元素指定过 left样式，则 style.left返回的是空字符串；
4、offsetTop :
当前对象到其上级层顶部边的距离。
不能对其进行赋值.设置对象到上级层顶部边的距离请用style.top属性。
style.top当前对象到其上级层顶部边的距离。
区别：1)style.top返回值除了数字外还带有单位px；
2)如对象到其上级层顶部边的距离设定值为百分比，
style.top返回此百分比,而offsetTop则返回到其上级顶部边的距离的值；
3)如果没有给 HTML 元素指定过 top样式，则 style.top返回的是空字符串；
注意：如果上级层为body，由于IE、FF对padding、margin的解释不一样所以要明确规定处理不是下列的区别就不成立了。
IE 1)如果Div的上级层是body，而div与body之间有个div，如body->div->divo；divo的offsetTop=div的padding+margin+boder；
2）如果Div的上级层是body，如body>divo；divo的offsetTop=div的padding+margin+boder；
这divo的offsetTop=divo的margin >body.padding则为divo的margin，否则为body.padding谁大是谁？
FF 上述两种情况：offsetTop=margin+padding ;
(IE与FF中的body默认padding为10)在IE6.0 FF3.6.13
5、scrollWidth:获取对象的滚动宽度 。
6、scrollHeight: 获取对象的滚动高度。
7、scrollLeft:设置或获取位于对象左边界和对象中目前可见内容的最左端之间的距离(width+padding为一体)
8、scrollTop:设置或获取位于对象最顶端和对象中可见内容的最顶端之间的距离；(height+padding为一体)
9、clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框；
10、clientHeight: 获取对象可见内容的高度，不包括滚动条，不包括边框；
11、clientLeft: 获取对象的border宽度
12、clientTop：获取对象的border高度
13、offsetParent :当前对象的上级层对象.
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
以上属性测试的文档类型为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果不写文档类型，浏览器就会按照 HTML 4.0 的方式来处理，则效果可能不同。
相关推荐
例如，在 IE6.0 和 Firefox 1.0.6+ 中，clientWidth 等于 width + padding，而 OffsetWidth 等于 width + padding + border。在 IE5.0/5.5 中，clientWidth 等于 width - border，而 OffsetWidth 等于 width。 另外...
在JavaScript中，理解和掌握`scrollLeft`、`scrollWidth`、`clientWidth`以及`offsetWidth`这四个属性对于创建动态且响应式的网页至关重要。这些属性都与元素的尺寸和定位有关，尤其在处理滚动条和元素可视区域时...
### scrollWidth、clientWidth与offsetWidth的区别 #### 一、scrollWidth详解 **scrollWidth** 属性表示元素及其内容的总宽度，包括由于内容溢出而不可见的部分。这一属性通常用于确定元素是否包含水平滚动条。...
在Web开发中，理解和掌握DOM元素的尺寸与位置属性至关重要，特别是`offsetWidth`、`clientWidth`、`scrollWidth`、`scrollTop`和`scrollLeft`这些属性。它们提供了关于元素几何特性的详细信息，有助于实现精确的布局...
在网页开发中，理解和掌握DOM元素的尺寸属性是至关重要的，特别是`scrollWidth`、`clientWidth`和`offsetWidth`。这三个属性都是用来获取HTML元素宽度的，但它们各自的含义和应用场景有所不同。 首先，`scrollWidth...
在JavaScript中，`scrollLeft`, `scrollWidth`, `clientWidth`, `offsetWidth` 等属性是处理元素尺寸和滚动位置的重要工具。这些属性各自代表着不同的意思，在实际开发中有着广泛的应用。 `scrollLeft` 属性用于...
### HTML:scrollLeft, scrollWidth, clientWidth, offsetWidth 完全详解 #### 一、scrollHeight 和 scrollWidth **scrollHeight** 和 **scrollWidth** 分别用来获取一个元素的滚动高度和滚动宽度。 - **...
在JavaScript中，DOM元素的尺寸和位置是网页布局的关键因素，`offsetWidth`、`clientWidth`、`innerWidth`以及一系列相关属性方法用于获取和处理这些信息。这些属性可以帮助开发者精确地控制页面元素的显示效果，...
在JavaScript（简称JS）开发过程中，页面元素的位置与尺寸计算是非常常见的需求之一。尤其是在处理复杂的网页布局时，正确理解和使用`top`、`clientTop`、`scrollTop`、`offsetTop`等属性对于实现精确的页面操作至关...
在探讨`clientHeight`, `offsetHeight`, `scrollHeight`, `clientWidth`, `offsetWidth`, 和 `scrollWidth`这些概念之前，我们首先需要理解它们在Web开发中的重要性。这些属性帮助开发者了解和控制网页在不同浏览器...
在前端开发过程中，我们经常会遇到需要获取页面元素尺寸的情况，这其中包括了元素的高度（`clientHeight`, `offsetHeight`, `scrollHeight`）以及宽度（`clientWidth`, `offsetWidth`, `scrollWidth`）。不同浏览器...
在web开发中，不可避免遇到要计算元素大小以及位置的问题，...假设某一个元素的横纵向滚动条都拖动到最末端，则offsetWidth、clientWidth、scrollWidth等属性相应的范围如下图所示： 1）offsetWidth ，offsetHeig
在JavaScript中，获取浏览器的高度和宽度是常见的需求，这在进行网页布局、动态调整元素尺寸或者实现滚动事件处理时尤其重要。以下将详细介绍如何通过JavaScript获取这些信息，并探讨不同浏览器间可能存在的差异。 ...
总结一下，JavaScript中处理元素宽度和高度的关键点包括： - `offsetWidth`和`offsetHeight`：包含边框和内边距的总尺寸。 - `clientWidth`和`clientHeight`：不包括边框，但包含内边距的可视区域尺寸。 - `...
- `posTop`与`top`的数值相同，但在JavaScript中，`posTop`通常用于计算，因为它返回的是一个数值而非带有单位的字符串，这在进行数学运算时更为方便。 3. `scrollTop`和`scrollHeight` - `scrollTop`是一个属性...