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

如果不写文档类型，浏览器就会按照 HTML 4.0 的方式来处理，则效果可能不同。

JS中关于clientWidth offsetWidth scrollWidth 等的含义的详细介绍的更多相关文章

  1. JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

    JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...

  2. JS中关于clientWidth offsetWidth scrollWidth 等的含义

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  3. js中的clientWidth offsetWidth scrollWidth等的含义

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

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

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  5. JS中关于clientWidth offsetWidth scrollWidth 等的区别

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  6. JS中关于clientWidth offsetWidth srollWidth等的含义

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  7. js中Number()、parseInt()和parseFloat()的区别进行详细介绍

    http://www.jb51.net/article/100606.htm 区别: parseFloat,parseInt  解析的过程中如果前面有空格,结果不会有任何影响,Number解析的时候结 ...

  8. clientWidth,offsetWidth,scrollWidth区别

    <html> <head> <title>clientWidth,offsetWidth,scrollWidth区别</title> </head ...

  9. IIS7中的站点、应用程序和虚拟目录详细介绍

    IIS7中的站点.应用程序和虚拟目录详细介绍 这里说的不是如何解决路径重写或者如何配置的问题,而是阐述一下站点(site),应用程序(application)和虚拟目录 (virtual direct ...

随机推荐

  1. mysql状态查询

    在监控中,都是去探测这些状态数据,然后换算到时间刻度上,像zabbix. show status like 'uptime'; --查看select语句的执行数 show [global] statu ...

  2. Qt 2D绘图之三：绘制文字、路径、图像、复合模式

    一.绘制文字 除了绘制图形以外,还可以使用QPainter::darwText()函数来绘制文字,也可以使用QPainter::setFont()设置文字所使用的字体,使用QPainter::font ...

  3. MySQL之select简单使用

    Select * from table_name Select column_name_1,column_name_2 from table_name Select * from student wh ...

  4. c#学习系列之静态类，静态构造函数，静态成员，静态方法（总之各种静态）

    <1>静态类: 静态类与非静态类的重要区别在于静态类不能实例化,也就是说,不能使用 new 关键字创建静态类类型的变量.静态类最大的特点就是共享.在声明一个类时使用static关键字,具有 ...

  5. [已读]javascript语言精粹

    又是一本广为赞颂的好书,当时才刚开始学,啃这本书的时候于是比较困难.记得是有介绍一些js中的“精华”与“糟粕”.

  6. 174. 删除链表中倒数第n个节点

    描述 笔记 数据 评测 给定一个链表,删除链表中倒数第n个节点,返回链表的头节点. 注意事项 链表中的节点个数大于等于n 您在真实的面试中是否遇到过这个题? Yes 样例 给出链表1->2-&g ...

  7. JVM垃圾回收机制二

    对象的回收 垃圾的回收涉及的几个问题:何时回收,由谁回收,怎样回收.这几个问题我们一一来解决. 1.何时回收----对象的生死判定 对象达到什么条件才能判断这个对象已经无用了.常见的判断对象生死的方法 ...

  8. Emacs Org-mode中英文字体设置

    Emacs Org-mode中英文字体设置 Table of Contents 1. 缺省字体存在的问题 2. 解决方法 2.1. 环境说明 2.2. 思路和方法 2.3. emacs设置代码 2.4 ...

  9. nodejs中的异步回调机制

    1.再次clear Timer定时器的作用 setTimeOut绝非是传统意义上的“sleep”功能,它做不到让主线程“熄火”指定时间,它是用来指定:某个回调在固定时间后插入执行栈!(实际执行时间略长 ...

  10. 从零开始利用vue-cli搭建简单音乐网站（三）

    1.利用router-link在组件之间传递数据 如上图,MainPage.vue中主要有8个推荐曲目数据,主要实现方式是建立好主页面模板,然后用v-for循环获取返回的music对象,然后分别绑定曲 ...