zoukankan      html  css  js  c++  java
  • document.documentElement和document.body的区别

    <div style="position:fixed; right:185px; bottom:70px; 22px; height:82px; background:url(images/backTop.jpg); text-align:center; display:none;" id="backtoTop">
    	
     </div>
    <script type="text/javascript">
    backTop=function (btnId){
    	var btn=document.getElementById(btnId);
    	var d  =document.documentElement;
    	window.onscroll=setDisplay;
    	btn.onclick=function (){
    		btn.style.display="none";
    		window.onscroll=null;this.timer=setInterval(function(){
    			d.scrollTop-=Math.ceil(d.scrollTop*0.1);
    			if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=setDisplay);
    			},10);
    		};
    	function setDisplay(){
    		if(d.scrollTop>=400||){
    			btn.style.display='block';
    		}else{
    			btn.style.display='none';	
    		}
    	}
    };
    backTop('backtoTop');
    </script>

     

    之前有在网上找到过类似的代码,然后放在自己的项目中。但是后来发现这个代码兼容性不强。凡是升级到最新版的国内浏览器(360,搜狗,淘宝)都无法执行。仔细研究代码发现,这其中存在着一个比较细微的区别,那就是document.documentElement和document.body的区别

     

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

     

    运行后没有达到预期效果,输出 document.documentElement.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  
                    || 0;
    




    documentElement 和 body 相关说明:


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

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

     

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

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

     

    最后,我将代码改良如下(有不到之处希望大家指点,谢谢!):

     

    <div style="position:fixed; right:185px; bottom:70px; 22px; height:82px; background:url(images/backTop.jpg); text-align:center; display:none;" id="backtoTop">
    	
     </div>
    <script type="text/javascript">
    backTop=function (btnId){
    	var btn=document.getElementById(btnId);
    	var d  =document.documentElement;
    	var d1 =document.body;
    	window.onscroll=setDisplay;
    	btn.onclick=function (){
    		btn.style.display="none";
    		window.onscroll=null;this.timer=setInterval(function(){
    			d.scrollTop-=Math.ceil(d.scrollTop*0.1);
    			if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=setDisplay);
    			},10);
    		};
    	function setDisplay(){
    		if(d.scrollTop>=400||d1.scrollTop>=400){
    			btn.style.display='block';
    		}else{
    			btn.style.display='none';	
    		}
    	}
    };
    backTop('backtoTop');



     

  • 相关阅读:
    SqlServer 查看数据库中所有存储过程
    SqlServer 查看数据库中所有视图
    SqlServer 查询表的详细信息
    SqlServer 遍历修改字段长度
    net core 操作Redis
    Tuning SharePoint Workflow Engine
    Open With Explorer
    Download language packs for SharePoint 2013
    Change Maximum Size For SharePoint List Template when Saving
    Six ways to store settings in SharePoint
  • 原文地址:https://www.cnblogs.com/suncoolcat/p/3327453.html
Copyright © 2011-2022 走看看