document.body.clientHeight 和 document.documentElement.clientHeight 的区别_document.body.clientheight document.documentelemen-程序员宅基地

技术标签: client  区别  javascript  

原文地址为: 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都对路径的大小写验证蛮严格的。


转载请注明本文地址: document.body.clientHeight 和 document.documentElement.clientHeight 的区别
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zhengxiuchen86/article/details/81631141

智能推荐

linux中 大文件分割成小文件_tar -zcf - out.log | split -b 10m --程序员宅基地

文章浏览阅读1.3k次。 自己遇到的情况是,一个excel文件40M,在电脑上打开,太卡了,怎么能把大文件分割成几个小文件,那就轻松多了啊。命令: split 分割 示例 split infile -b 10m -d -a 4 outfile -b 是分割文件大小,10m代表10M/每个文件。 -d 后缀名是用数字,而不是字符。 -a 后缀是几个字符构成的。 ..._tar -zcf - out.log | split -b 10m -

msf生成木马-----使用不良手段法律后果自行承担-程序员宅基地

文章浏览阅读828次,点赞16次,收藏20次。msf生成木马,该文章博主用作实验,使用不良手段法律后果自行承担

【Python】xarray交换维度、更改变量内部的维度位置教程_xarray transpose-程序员宅基地

文章浏览阅读1.8k次,点赞3次,收藏6次。这样变量内部维度排布由原来的(time,lat,lon)变成了(lon,lat,time),和Dimentions和Coordinates中的位置一致了。当然可根据个人需要修改成自己想要的位置。如果想让原位置不动,更改变量部分的维度位置,使用transpose即可,内部写好目标维度的位置。首先读取nc文件并查看内部维度分布情况。发现其与变量内部排布顺序一致了。_xarray transpose

【Python | hashlib】使用hashlib计算安全哈希SHA1, SHA224, SHA256, SHA384 和 SHA512 以及 RSA 的 MD5_hashlib.sha256-程序员宅基地

文章浏览阅读438次。时间流逝吧,你是多么的残酷。时间停止吧,你是多么的美丽。_hashlib.sha256

uniapp开发小程序-如何判断小程序是在手机端还是pc端打开_uniapp 判断电脑还是手机访问微信小程序-程序员宅基地

文章浏览阅读2k次,点赞5次,收藏5次。api获取平台值,如果值是。_uniapp 判断电脑还是手机访问微信小程序

Android Jetpack 应用架构指南_android jetpack 架构指南-程序员宅基地

文章浏览阅读1.2k次。移动应用用户体验在大多数情况下,桌面应用会将桌面或程序启动器当做单个入口点,然后作为单个整体流程运行。Android 应用则不然,它们的结构要复杂得多。典型的 Android 应用包含多个应用组件,包括Activity、Fragment、Service、内容提供程序和广播接收器。您需要在应用清单中声明其中的大多数应用组件。Android 操作系统随后会使用此文件来决定如何将您的应用集成到..._android jetpack 架构指南

随便推点

06:循环数_06:循环数-程序员宅基地

文章浏览阅读8.2k次,点赞15次,收藏32次。06:循环数 总时间限制: 1000ms 内存限制: 65536kB 描述 若一个n位的数字串满足下述条件,则称其是循环数(cyclic):将这个数字串视为整数(可能带有前导0),并用任意一个 1 到 n 之间(包含1和n)的整数去乘它时, 会得到一个将原数字串首尾相接后,再在某处断开而得到的新数字串所对应的整数。例如,数字 142857 是循环数,因为: 142857 *1 = 1428_06:循环数

vert.x json mysql_如何在Vert.x中用Jackson传输JSON结果(java)-程序员宅基地

文章浏览阅读391次。我假设您正在生成巨大的JSON文档,因为小的字符串输出已足够好:objectMapper.writeValue(< String&gt ;, result);流有问题. ObjectMapper不知道结果大小,您最终会遇到以下异常:java.lang.IllegalStateException: You must set the Content-Length header to be..._you must set the content-length header to be the total size of the message b

Vue3语法插件Volar在vsCode中搜不到,Volar正式更名为Vue-Official_vue-official插件-程序员宅基地

文章浏览阅读1.7k次,点赞4次,收藏5次。如果之前装过Volar插件的,其实不用担心,因为更名后的Vue-Official,它会自动给你将之前的覆盖掉,简而言之,壳子还是之前的壳子,更名后Vue-Official比之前的Volar升级了不少东西,例如某些新语法特性,之前的插件会报错,而更新后的插件不会了。操作步骤:按住鼠标左键,把组件拖拽到想要引入的地方,VSCode 会提示按住 shift 放入编辑器中,我们按 shift ,鼠标移动到我们想到放置组件的位后,并放开鼠标左键,即可自动导入组件。_vue-official插件

maven环境变量配置不成功解决方案_maven配置系统变量失败-程序员宅基地

文章浏览阅读9.3k次,点赞10次,收藏10次。maven环境变量配置不成功解决方法安装maven时,完全按照网上教程配置环境变量,但始终不能成功配置环境变量,参考了maven 环境变量安装不成功解决方法一maven环境变量配置不成功的原因等几篇文章均未能解决。采用echo %MAVEN_HOME%命令发现端倪,返回的路径名称前面多了红框中的部分,测试其他已配置好的环境变量均未发现该框,查资料得知LRE表示unicode控制..._maven配置系统变量失败

css选择器的权重值复习_hover选择器的权重-程序员宅基地

文章浏览阅读140次。css选择器的具体权重值四个等级:内联样式:style=“xxx: xxx;”,权重值为1000。ID选择器:#xxx,权重值为100。类名(class),伪类(如 :hover),属性选择器(如: [attribute] ),权重值为10。元素选择器和伪元素选择器,权重值为1。通用选择器( * )、子选择器( > )、相邻同胞选择器( + )的权重为0。..._hover选择器的权重

python包的离线安装(linux服务器不能连外网)_离线安装 grpcio-程序员宅基地

文章浏览阅读3.3k次,点赞3次,收藏12次。当服务器不能连接外网,我们需要手动来进行python包的离线安装。我的方法有两种:1.在python包的[官网](https://pypi.org/)或者[镜像](https://www.lfd.uci.edu/~gohlke/pythonlibs/)上找到符合自己当前操作系统的whl文件,进行下载,然后上传到服务器,依次手动安装。**2.(更为推荐)通过一个可以联网的机器python虚拟环境来安装,你需要找一个和服务器操作系统相同的虚拟机利用pip来自动下载这些whl文件。_离线安装 grpcio

推荐文章

热门文章

相关标签