转document.documentElement和document.body的区别

网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动:

转至:http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html

<div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div>
window.onscroll = function ()
{var div = document.getElementById("div");div.style.top = document.body.scrollTop + "px";
}

 

运行后没有达到预期效果,输出 document.body.scrollTop 的值一看,一直都是 0。一翻折腾,原来是 DTD 的问题,要是页面直接用 <html> 开头的话就没有问题了。但是要符合 web 标准,DTD 当然是不能少的。

如果有 DTD 时用,那就用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以了。

 

window.onscroll = function ()
{var oFix = document.getElementById("divfix");oFix.style.top = document.documentElement.scrollTop + "px";
}




DTD相关说明:

 

页面具有 DTD,或者说指定了 DOCTYPE 时,使用 document.documentElement。

页面不具有 DTD,或者说没有指定了 DOCTYPE,时,使用 document.body。

在 IE 和 Firefox 中均是如此。

为了兼容,不管有没有 DTD,可以使用如下代码:

 

var scrollTop = window.pageYOffset  //用于FF|| document.documentElement.scrollTop  || document.body.scrollTop  //chrom|| 0;




documentElement 和 body 相关说明:

 

body是DOM对象里的body子节点,即 <body> 标签;

documentElement 是整个节点树的根节点root,即<html> 标签;

 

DOM把层次中的每一个对象都称之为节点,就是一个层次结构,你可以理解为一个树形结构,就像我们的目录一样,一个根目录,根目录下有子目录,子目录下还有子目录。

以HTML超文本标记语言为例:整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它,它就是整个节点树的根节点。而body是子节点,要访问到body标签,在脚本中应该写:document.body。


转载于:https://www.cnblogs.com/xiaohong/p/3549483.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/360122.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php js 图片旋转,jQuery实现可以控制图片旋转角度效果

本文实例讲述了jQuery实现可以控制图片旋转角度效果。分享给大家供大家参考&#xff0c;具体如下&#xff1a;运行效果截图如下&#xff1a;具体代码如下&#xff1a;/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">img { margin-top:100px; m…

【ARDUINO】HC-05蓝牙不配对问题

除了刷主从之外&#xff0c;不配对的原因有1&#xff1a;已经配对其他设备&#xff0c;需用ATRMAAD来移除。2、默认为蓝牙由绑定指令设置&#xff0c;需改为任意地址连接模式ATCMODE1 //#define AT 2 #define LED 12 void setup() {pinMode(LED,OUTPUT);//pinMode(AT,OUTPUT);S…

php 选股器,RSI切线突破选股指标(TDX)..

本帖最后由 yinchoo 于 2009-7-25 09:10 编辑1、对于RSI指标的运用请查坛中伟哥、井中月、cqcsshw 、九阳 等高手的贴子&#xff1a;http://www.stockwei.com/viewthread.php?tid36200&highlightRSIhttp://www.stockwei.com/viewthread.php?tid36267&highlightRSIhtt…

中等数学类杂志投稿信箱

《中国数学教育》jcme_g163.com(高中版) 《数学教学》sxjxzzmath.ecnu.edu.cn 《中学数学》hbzxsx126.com&#xff08;高中&#xff09; 《数学通讯(教师版)》shxtxjshyahoo.com.cn 《数学通讯(学生版)》shxtxxuesh163.com 《数学传播》mediamath.sinica.edu.tw 《中学教研&…

卡方检验法+matlab,【T】显著性检验(2)—卡方检验法

该博文已整理到新地址&#xff1a;记数数据统计法在各个研究领域中&#xff0c;有些研究问题只能划分为不同性质的类别&#xff0c;各类别没有量的联系。例如&#xff0c;性别分男女&#xff0c;职业分为公务员、教师、工人、……&#xff0c;教师职称又分为教授、副教授、………

【OAuth】快速入门

一、引言 1、什么是OAuth2.0&#xff1f; OAuth 2.0是一个关于授权的开放网络协议&#xff0c;允许用户授权第三方应用访问其在服务提供商上存储的资源&#xff08;如照片、视频、联系人列表&#xff09;&#xff0c;而无需将用户名和密码提供给第三方应用。OAuth 2.0在第三方应…

脚本解决.NET MVC按钮重复提交问题

见于&#xff1a;Avoiding Duplicate form submission in Asp.net MVC by clicking submit twice 脚本代码&#xff1a; $(document).on(invalid-form.validate, form, function () {var button $(this).find(input[type"submit"]);setTimeout(function () {button.…

== 与 === 介绍与区别

操作符&#xff1a; 要是两个值类型不同&#xff0c;返回false 要是两个值都是number类型&#xff0c;并且数值相同&#xff0c;返回true 要是两个值都是stirng&#xff0c;并且两个值的String内容相同&#xff0c;返回true 要是两个值都是true或者都是false&#xff0c;返回tr…

jert oracle 统计说明,Oracle JET简单入门(一)Oracle JET介绍

Oracle JET (Oracle Javascript Extension Toolkit)是一款 Oracle 的 JavaScript 拓展工具包。简单来说 Oracle JET 是一个一堆好用的前端工具结合体。Oracle JET 文档链接 http://docs.oracle.com/middleware/jet310/jet/developer/toc.htmOracle JET支持 Model-View-ViewMod…

Why you have so few friends?

Why you have so few friends?十个原因告诉你&#xff1a;为什么你的朋友那么少1. You Complain A Lot 你总是抱怨 If you’re constantly complaining about your job, lack of money, or unfair life, people won’t care to spend a lot of time with you. Complaining g…

查看oracle自动优化,使用索引查询更快,优化器为何不能自动识别

本帖最后由 〇〇 于 2015-12-24 12:17 编辑有如下查询&#xff0c;不加hint时&#xff0c;优化器自己选择的执行计划是走全表扫描&#xff0c;花费时间很长&#xff0c;但加hint强制让大表走skip index时间很短&#xff0c;根据传统的理解&#xff0c;引导列上重复出现的值越少…

javascript: 数组

var a[1,2,3] >a[0] 1 >a[1] 2 >a[2] 3 >a[3] undefined >a[-1] undefined for循环遍历每个元素 for(var key in a){console.log(a[key]);} 1 2 3 数组对象对应的方法(method) >a.length//数组元素个数 3>a.push(4)//在数组最后追加元素4>a[1, 2, 3, 4…

SELECT语句使用JDBC和Hibernate批量获取

介绍 现在&#xff0c;我已经介绍了Hibernate对INSERT &#xff0c; UPDATE和DELETE语句的批处理支持&#xff0c;是时候分析SELECT语句结果集的批量提取了。 JDBC ResultSet提供了一个客户端代理游标&#xff0c;用于获取当前语句的返回数据。 执行该语句后&#xff0c;必须将…

linux 更改父进程名称,[Linux进程]在父进程和子进程中分别修改变量

/*这是一个调用fork函数创建一个子进程&#xff0c;然后分别打印输出子进程和父进程中的变量的实例*/#include #include #include #include int glob 6; //外部变量int main(void){int var; //内部变量pid_t pid; //文件标识符var 88;//内部变量printf("…

Spring环境的搭建与测试 (spring2.5.6)

这里是采用的视频里面的spring版本 下载spring2.5.6&#xff0c; 然后进行解压缩&#xff0c;在解压目录中找到下面jar文件&#xff0c;拷贝到类路径下 dist\spring.jar lib\jakarta-commons\commons-logging.jar 上边两个是基本的jar包。。 如果使用了切面编程(AOP),还需要下列…

linux 多核 系统时钟,Linux中的时间

1. Linux中time相关概念1.1 real time指的是实际流逝的时间&#xff0c;又称为Wall Clock Time(墙上时间)。比如&#xff0c;time命令统计出的real time指的是该进程从开始运行到运行结束所消耗的时间。在这段时间内不仅仅执行了该进程&#xff0c;其他进程的时间片也得到了轮转…

经纬度 在线计算距离

http://www.storyday.com/wp-content/uploads/2008/09/latlung_dis.html 转载于:https://www.cnblogs.com/sgdkg/p/3558112.html

如何使用Hibernate批处理INSERT和UPDATE语句

介绍 JDBC长期以来一直为DML语句批处理提供支持。 默认情况下&#xff0c;所有语句都一个接一个地发送&#xff0c;每个语句都在单独的网络往返中发送。 批处理使我们能够一次性发送多个语句&#xff0c;从而节省了不必要的套接字流刷新。 Hibernate将数据库语句隐藏在事务后写…

【ASP.NET Web API教程】5.4 ASP.NET Web API批处理器

【ASP.NET Web API教程】5.4 ASP.NET Web API批处理器 原文:【ASP.NET Web API教程】5.4 ASP.NET Web API批处理器注&#xff1a;本文是【ASP.NET Web API系列教程】的一部分&#xff0c;如果您是第一次看本系列教程&#xff0c;请先看前面的内容。 Batching Handler for ASP.N…

linux 查看系统组账号密码是什么,Linux 用户与组管理详解(system-config-users 命令行)...

用户与组管理用户相关文件组账号相关文件用户和组管理软件&#xff1a;基于命令行的用户和组管理创建用户查看用户信息删除用户修改用户信息为用户创建密码更改用户密码信息创建组删除组查看当前登录到系统的用户用户与组管理什么是用户&#xff0c;用户是人吗&#xff1f;用户…