JS中关于clientWidth offsetWidth scrollWidth 的区别及意义

网页可见区域宽: 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 (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">

时间: 2024-10-24 21:54:24

JS中关于clientWidth offsetWidth scrollWidth 的区别及意义的相关文章

JS中关于clientWidth offsetWidth scrollWidth 等的含义

转载,原文:http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html 网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth   (包括边线的宽);网页可见区域高: document.body.offsetHeight  (包括边线的宽);网页正文全文宽: documen

js中的clientWidth offsetWidth scrollWidth等的含义

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth   (包括边线的宽);网页可见区域高: document.body.offsetHeight  (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: documen

clientWidth offsetWidth scrollWidth的区别

scrollWidth  是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度). clientWidth  是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变.  offsetWidth  是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变. 一个scrollWidth和clientWidth的例子:  <html>  <head>  <title>77.htm文件</title>  </hea

js中callback.call()和callback()的区别

js中callback.call()和callback()的区别在js中callback.call()和callback() 有什么区别,举个例子:function a(){alert('hello!');}function b(callback){callback();}function c(callback){callback.call();}function test(){b(a);c(a);}在test函数中,b和c的效果是一样的,都执行了回调函数a.这两种用法有什么区别呢? -----

JS中的setTimeout和setInterval的区别

学了许久的javascript,发现其中非常常用的两个函数,就是setInterval和setTimeout函数,对这两个函数的理解,有时觉得很模糊,经过多次的试验,终于对它有了比较深入的了解.定义,setInterval()-- 间隔指定的毫秒数不停地执行指定的代码.setTimeout,延迟两秒调用函数,这个定义非常的简单,但是它并不像字面意思上那么的简 很多人都觉得这两个方法差不多,但是,实际上,他们差的很远呢     因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指

js中style,currentStyle和getComputedStyle的区别

js中style,currentStyle和getComputedStyle的区别 MarysMa 在js中用xx.style.marginTop是无法获取写在css或<sytle>标签中的margin-top之类的样式值(包括width,height等). 这就是style属性的限制: style :只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.(内联样式: body中标签里用style直接写的样式.) currentStyle :可以弥补style的不足,但是只适用

JS中三目运算符和if else的区别分析与示例

本文是通过示例详细分析了JS中三目运算符和if else的区别,是篇非常不错的文章,这里推荐给大家. 今天写了一个图片轮播的小demo,用到了判断 先试了一下if else,代码如下: 复制代码代码如下: if(n >= count-1){n =0;}else{n ++;} 随后代码写完了,准备优化一下代码,将此段改成了三目运算符的写法 复制代码代码如下: n = n >= (count-1) ? n=0 : n++ 结果完全不同 随后研究了一下这两者的区别,总结为一句话:三目运算有返回值,i

JS中NaN、null、Undefined区别

1.NaN(not a number)非数字.不和任何数字相等,包括自己本身,可以用isNaN()判断,当praseInt()和praseFloat()不能解析时返回NaN.NaN为number对象下的一个属性,number.NaN typeof(NaN)   //return number NaN == NaN   //return FALSE 2.null 表示尚未存在的对象, 3.undefined表示尚未初始化   var a:alert(a)  //return undefined 在

JS中构造函数与普通函数的区别及JS构造函数、原型和实例的关系

JS中构造函数与普通函数的区别: https://www.cnblogs.com/cindy79/p/7245566.html JS构造函数.原型和实例的关系: https://blog.csdn.net/u012443286/article/details/78823955 JavaScript构造函数及原型对象: https://blog.csdn.net/a153375250/article/details/51083245 原文地址:https://www.cnblogs.com/jim