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

    1、javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别

    这个问题是我在整合新的美工页面的时候发现的,在整合页面的时候菜单页面始终显示不出来。但是查看源代码,里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试,发现其中一个取得页面高度的变量 bodyHeight 一直是0。就是因为他是0,所以菜单才显示不出来。

    而取得bodyHeight 高度的语句是 var bodyHeight = document.documentElement.clientHeight;

    于是在网上查找相关的资料,结合美工页面和程序的页面对比。

    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度

    程序页面里面少了一句 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    我在ie下做了一下测试,下面是测试代码

     1 <html xmlns=”http://www.w3.org/1999/xhtml”>
     2  <head>
     3   <title> New Document </title>
     4   <script language="JavaScript">
     5   <!--
     6   function a(){
     7         document.getElementById("bodyheight").innerText = document.body.clientHeight;
     8         document.getElementById("documentheight").innerText = document.documentElement.clientHeight;
     9     }
    10   //-->
    11   </script>
    12  </head>
    13 
    14  <body>
    15     <p>
    16         <href="javascript:a()">click here</a>
    17         <br/>
    18             document.body.clientHeight = <span id="bodyheight"></span> px
    19         <br/>
    20             document.documentElement.clientHeight = <span id="documentheight"></span> px
    21     </p>
    22  </body>
    23 </html>


    测试结果:

    当页面上有DOCTYPE的时候,值为

    document.body.clientHeight = 54px
    document.documentElement.clientHeight = 729px

    当没有DOCTYPE时

    document.body.clientHeight = 729px
    document.documentElement.clientHeight = 0px

    可以看出,document.body.clientHeight 和 document.documentElement.clientHeight 的区别。

    就是因为少了DOCTYPE 所以 document.documentElement.clientHeight 的值为0。而换成 document.body.clientHeight就好了。

    为什么少了DOCTYPE,document.documentElement.clientHeight会为0呢?

    这是W3C标准的支持。在网上查到一篇文章那位作者有详细的解释 http://hi.baidu.com/bluedream_119/blog/item/dc377d4bef83aff783025c68.html

    2、关于tomcat服务器的路径大小写问题

    在整合美工页面的过程中,由于美工在引用js和css样式的时候路径时而大写,时而小写。在windows用ie直接打开都能浏览,页面显示正常。

    但是当我整合到项目里面以后,架设到tomcat中的时候,页面样式全部消失。找了半天原因未果,一个同事说是不是因为路径大小写的原因,一试,果然。

    记下,以后注意路径的大小写问题。貌似tomcat,websphere都对路径的大小写验证蛮严格的。

  • 相关阅读:
    Python学习之路
    like's photos
    Django---子框架drf内容总结
    Django---子框架drf项目---路飞学城---前后端搭建
    Django---drf,JWT补充、基于就角色的权限控制(django内置auth体系)
    常见三种加密(MD5、非对称加密,对称加密)
    Django---drf,自定制频率、自动生成文档、JWT
    PEP8 常用规范
    Class meta
    Django---drf, books系列表接口、分页器、根据ip进行频率限制---作业
  • 原文地址:https://www.cnblogs.com/luluping/p/1778766.html
Copyright © 2011-2022 走看看