document.documentElement和document.body区别以及获取浏览器的宽高
原文:http://www.jb51.net/article/41410.htm
1.区别:
body是DOM对象里的body子节点,即 <body> 标签;
documentElement 是整个节点树的根节点root,即<html> 标签;
2.没使用DTD情况即怪异模式BackCompat下:
代码如下:
使用DTD情况即标准模式CSS1Compat下:
代码如下:
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else { //document.compatMode == "CSS1Compat"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}
获取当前页面的滚动条纵坐标:document.documentElement.scrollTop
网页被卷去的高: document.body.scrollTop;
在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替;
document.documentElement和document.body区别以及获取浏览器的宽高的更多相关文章
- Js怎么获取DOM及获取浏览器的宽高?
在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. ...
- JQuery-- 获取元素的宽高、获取浏览器的宽高和垂直滚动距离
* 能够使用jQuery设置尺寸 * .width() width * .innerWidth() width + padding * .outerWidth() width + padding + ...
- js获取浏览器内容宽高(小计)
<SCRIPT LANGUAGE="JavaScript">var s = "";s += "\r\n网页可见区域宽:"+ d ...
- JQ 获取浏览器窗口宽高
$(window).height(); // 浏览器时下窗口可视区域高度 $(document).height(); //浏览器时下窗口文档的高度 $(document.body).height(); ...
- 【转】document.documentElement和document.body的区别
转自:http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html 网页中获取滚动条卷去部分的高度,可以通过 document.body ...
- document.documentElement和document.body的区别
网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style=&qu ...
- document.documentElement和document.body区别介绍
document.documentElement和document.body区别介绍 * 区别 body是DOM对象黎明的body子节点,即标签 docummentElement 是整个树的根节点ro ...
- js中document.documentElement 和document.body 以及其属性 clientWidth等
在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...
随机推荐
- java - day12 - ShapeTest
抽象类的定义及使用 抽象类不能实例化,但抽象类名的数组类型可以,见案例 package com.example; public class ShapeTest { public static void ...
- nginx 中location和root,你确定真的明白他们关系?
最近公司开发新项目,web server使用nginx,趁周末小小的研究了一下,一不小心踩了个坑吧,一直404 not found!!!!!当时卡在location和root中,但是网上却比较少聊这方 ...
- 当synchronized关键字和this关键字
package cn.itcast_01_mythread.thread.testThread; public class MyThreadWithImpliment_Synch_method imp ...
- cpu故障定位 top strace pstack
一次服务器CPU占用率高的定位分析 推荐 背景:通过性能监控发现上线服务器cpu某核占用率已经达到了100%,而且是由我们的某个核心服务导致的.幸亏由于我们的服务进程由多个相同worker(线程) ...
- 15:开发Rsync服务启动脚本案例
[root@m01 ~]# rsn_count="ps -ef|grep 'rsync --d[a]emon'|wc -l" [root@m01 ~]# echo ${rsn_co ...
- 一个基于 EasyUI 的前台架构(3)封装操作Tabs的JS代码
一般来说,系统框架的主内容区会引入另一个独立的 Web 页面来实现系统的功能,所以在在 Tabs 里的每一个标签页里使用 iframe 标签来引入子页面.所以这里可以将 Tabs 的 Content ...
- 电脑的文件怎么拷贝复制到VMware虚拟机
我们有时候想要在电脑和虚拟机之间复制粘贴文件,当然最笨的方法是用U盘进行复制转移,但是这样也太落伍了吧,那么我们怎么利用虚拟机自带的功能,然后将电脑的文件复制拷贝到VMware虚拟机中呢?有些朋友不太 ...
- Tomcat无法启动:Server Tomcat v8.5 Server at localhost failed to start
Tomcat无法启动 项目状态 Maven项目:基础环境(依赖,基本配置文件)搭建完成,前端页面都导入,部署测试项目环境,出现该问题 问题情景: 1.弹窗提示Tomcat启动失败 2.Console ...
- mac与phy怎样实现网络自适应
这两天改动网卡驱动以实现10/100/1000M自适应,因此研究了下phy芯片和emac驱动怎样兼容10/100/1000M网络环境,记录在此. 网络中设备端数据链路层由mac芯片和phy芯片组成.p ...
- Android:SlidingMenu+ListView+ViewPager 的滑动冲突
在项目中遇到了SlidingMenu.ListView.ViewPager 一起使用.而且ViewPager 是放在ListView的header中,这样的情况下会无法滑动ViewPager,通过在网 ...