JS:document.documentElement对象的
document.documentElement.clientWidth
获取浏览器窗口文档显示区域的宽度,不包括滚动条。
document.documentElement.clientHeight
获取浏览器窗口文档显示区域的高度,不包括滚动条。
浏览器兼容性
所有浏览器解释都一样。
document.documentElement.offsetWidth
获取DOM文档的根节点html元素对象的宽度,即offsetWidth=width+padding+border,不包括margin。
document.documentElement.offsetHeight
获取DOM文档的根节点html元素对象的高度,即offsetHeight=height+padding+border,不包括margin。
浏览器兼容性
在IE9、10中,offsetWidth和offsetHeight指的是浏览器窗口文档显示区域的宽度和高度,包括滚动条。
在IE8中,offsetWidth和offsetHeight指的是浏览器窗口文档显示区域的宽度和高度,包括滚动条和文档显示区域边缘2px的灰色边框。
在IE7中,offsetWidth和offsetHeight的值等于clientWidth和clientHeight,即不包括滚动条和文档显示区域边缘2px的灰色边框。
document.documentElement.scrollWidth
获取html元素对象内容的实际宽度,即html元素对象的滚动宽度。
document.documentElement.scrollHeight
获取html元素对象内容的实际高度,即html元素对象的滚动高度。
浏览器兼容性
在FireFox、IE8、IE9和IE10中,scrollWidth和scrollHeight指的是整个页面文档的滚动宽度和高度。但是在IE8、9、10中,如果给html元素设置margin,则上下左右都有margin;而在Chrome、Safari、Opera、FireFox中,margin-right和margin-bottom是没有的。所以在IE8、9、10中,如果html元素上下左右都有margin,scrollWidth和scrollHeight的值要大一些。
在IE7中,scrollWidth的值=body的width+body的padding+body的border+body的margin+html的padding+html的border+html的margin-left。同理可得scrollHeight的值。下图中用红框框出了scrollWidth和scrollHeight的范围。左图是上半部分,右图是下半部分。
document.documentElement.clientLeft
获取html元素对象的左边框的宽度。
document.documentElement.clientTop
获取html元素对象的上边框的宽度。
浏览器兼容性
在FireFox中,clientLeft和clientTop的值永远为0。
在IE7中,clientLeft和clientTop的值永远为2。
document.doucmentElement.offsetLeft
获取html元素对象相对于整个页面文档的位置,也就是html元素的margin。
document.documentElement.offsetTop
获取html元素对象相对于整个页面文档的位置,也就是html元素的margin。
浏览器兼容性
在FireFox中,offsetLeft和offsetTop的值就是负的html元素的border-width。
在IE中,offsetLeft和offsetTop的值始终为0。
document.documentElement.scrollLeft
设置或获取页面文档向右滚动过的像素数。
document.documentElement.scrollTop
设置或获取页面文档向下滚动过的像素数。
JS:document.documentElement对象的的更多相关文章
- js中document.documentElement 和document.body 以及其属性 clientWidth等
在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...
- 5月15日上课笔记-js中 location对象的属性、document对象、js内置对象、Date事件对象、
location的属性: host: 返回当前主机名和端口号 定时函数: setTimeout( ) setInterval() 二.document对象 getElementById(); 根据ID ...
- js中的document.body.scrollTop与document.documentElement.scrollTop
获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop获取当前页面滚动条横坐标的位置:document.b ...
- (转)JS获取当前对象大小以及屏幕分辨率等
原文 JS获取当前对象大小以及屏幕分辨率等 <script type="text/javascript">function getInfo(){ var ...
- JS获取当前对象大小以及屏幕分辨率等...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta nam ...
- document.body.clientHeight和 document.documentElement.clientHeight 的区别
1.javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 在往同事负责的页面添加我的功 ...
- 【Javascript Demo】JS获取当前对象大小以及屏幕分辨率等
效果如下: 代码如下: <html> <head> <title>获取当前对象大小以及屏幕分辨率等</title> <body> <d ...
- JS 之DOM对象(1)
介绍DOM1中底层的一些属性和方法. 节点操作 appendChild() parentNode.appendChild(newNode) 在parentNode节点的最后插入newNode ins ...
- document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
随机推荐
- 配置ssh免密登录遇到的问题——使用VMware多虚拟机搭建Hadoop集群
搭建环境: 虚拟机 VMware12Pro 操作系统 centos6.8 hadoop 1.2.1 1.导入镜像文件,添加java环境 1.查看当前系统中安装的java,ls ...
- vim-0-indent(缩进)
缩进: 参考自http://liuzhijun.iteye.com/blog/1831548,http://blog.csdn.net/chenxiang6891/article/details/41 ...
- Android菜单(menu)
Android 菜单 我们继续来进行学习,今天写一下在软件中用的还算较多的菜单. 1.Menu 菜单,很显然,作用就是点击不同的选项触发不同的方法.现在在安卓使用中推荐使用ActionBar,但这里 ...
- nginx 配置反向代理解决请求跨域问题
server { listen ; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; roo ...
- sentry使用
开篇-Sentry是什么 Sentry是开源错误跟踪,帮助开发人员实时监控和修复崩溃.不断重复.提高效率.改善用户体验. 这篇文章的作用 记录这篇文章是想分享一下,因为本人在配置时因为邮件服务花费了很 ...
- Spring中应用的那些设计模式
设计模式作为工作学习中的枕边书,却时常处于勤说不用的尴尬境地,也不是我们时常忘记,只是一直没有记忆. 今天,我们就设计模式的内在价值做一番探讨,并以spring为例进行讲解,只有领略了其设计的思想理念 ...
- [noip模拟]难缠的值周生<宽搜>
难缠的值周生 [问题描述] 小 P 上学总是迟到,迟到了以后常常会被值周生发现.被值周生发现就会给他所在的班级扣分,被扣了分不免要挨班主任的训,这令小 P 很不爽.不过,聪明的他经过观察发现,值周生通 ...
- flex布局你真的搞懂了吗?通俗简洁,小白勿入~
flex布局 用以代替浮动的布局手段: 必须先把一个元素设置为弹性容器://display:flex: 一个元素可以同时是弹性容器和弹性元素; 设为flex布局以后,子元素的float.clear和v ...
- PTA数据结构与算法题目集(中文) 7-29
PTA数据结构与算法题目集(中文) 7-29 7-29 修理牧场 (25 分) 农夫要修理牧场的一段栅栏,他测量了栅栏,发现需要N块木头,每块木头长度为整数Li个长度单位,于是他购买了一条 ...
- .NET Core 3.1 的REST 和gRPC 性能测试
看到越南小哥 的github 上的Evaluating Performance of REST vs. gRPC , 使用的是.NET Core 3.0 , 今天我把它升级到.NET Core 3.1 ...