document.body.clientHeight返回值为0的解决方案

最新推荐文章于 2024-03-22 14:25:18 发布
最新推荐文章于 2024-03-22 14:25:18 发布
阅读量666 收藏
点赞数
分类专栏： HTML5 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alleni123/article/details/84544410
版权
使用HTML5 DOCTYPE，会出现document.body.clientHeight为0
网上查了一下， 貌似有很多个解决方案。

1. 使用document.documentElement.clientHeight获取。
当使用html5的时候，就会有documentElement在document下。


[img]http://dl2.iteye.com/upload/attachment/0095/6096/453136c3-860d-351a-96a5-77e2bd7faeaa.jpg[/img]

如上图所示 ， 左边为chrome，右边为ie。
完全没办法兼容。。


2. 设置DOCTYPE为html4.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

经测试该方法可行。 如图


[img]http://dl2.iteye.com/upload/attachment/0095/6102/539577f8-0ab7-3c75-8792-063f443db7b1.jpg[/img]

这种情况只要使用document.body.clientHeight就行了。
但是我想使用html5来作为文档类型。


3. html5-> 设置html,body{height:100%}
在使用html5文档类型的时候， 设置了html body的高度100%之后，两个浏览器就都能获取document.body.clientHeight了。

[img]http://dl2.iteye.com/upload/attachment/0095/6106/a7b070fd-26a0-3bff-8485-55759f4694e8.jpg[/img]

网上查了一下，
[url]http://forums.asp.net/t/1058801.aspx?Why+do+clientHeight+and+offsetHeight+always+return+zero+[/url]
这个网站是这么设置的。
既然有人这么弄，那就先放心的使用了。
alleni123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用document.documentElement取代document.body的原因分析
01-19
上次的测试说明了document.body属性并不会给我们返回预期的结果，比如我们用document.body.clientHeight原本想取得“页面可见区域高度”，可实际上返回的是“页面实际内容高度”。 那我们怎么办呢？难道加上了文档...
doctype后如何获得body.clientHeight的方法
10-30
doctype后如何获得body.clientHeight的方法
html5中document.body.clientHeight返回0
rongyong的专栏
03-12 2080
在CSS中设置：html,body{height:100%;}
关于document.body.clientHeight的返回值为0的问题
Panda0218的博客
01-14 3541
有时候我们需要去获取body的高度，但是通过document.body.clientHeight却得到值是0。那么如何解决这个问题呢？ 我们只需要将html和body的css样式中添加属性height:100%;即可。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;titl...
document.documentElement.clientHeight与document.body.clientHeight的区别
galaxyJING的博客
03-22 494
scrollHeight: 当元素的子元素高度大于父元素，父元素出现滚动条，此时父元素的clientHeight表示可视的高度，父元素的scrollHeight 表示页面的高度，包括溢出页面被挡住的部分，即其实就是子元素的高度。单位px，只读元素。clientHeight： 表示可视区域高度， 包括padding但不包括border、水平滚动条、margin的元素的高度。offsetHeight：表示可视区域高度，包括padding、border、水平滚动条，但不包括margin的元素的高度。
【HTML5】关于document.body.clientHeight返回值为0的解决方案
Duawieh的博客
07-29 1034
网上关于此问题的其中一种解决方案是使用HTML4，但是如果我们希望在保持HTML5版本不变的前提下解决此问题呢？标签添加上文所述样式即可，添加样式的方式不限，然后我们就可以在 Javascript 中正常调用了。这里引用一下@kelly0721的博客中的图片，为各位展示一下我们可以获取的各种屏幕元素尺寸。可见其正常输出了页面可见区域高度，并且能够随屏幕缩放实时地得到不同的值。正是浏览器页面可见区域的高度。
关于JavaScript中document.body.clientHeight获取页面高度为0的问题及解决方案
chad273的博客
01-03 3261
js中如下语句 h = document.body.clientHeight； 获得的 h 值始终为0，找了半天终于解决，将代码改写如下即可： h = document.documentElement.clientHeight； 初学js，具体原因还不懂，貌似和DOM中从层次不同有关，有待继续学习研究。同时希望大神帮忙解答。 ...
关于window.pageYOffset和document.documentElement.scrollTop
12-10
举个例子： Css:假定进行如下简单设置；...} JS： 代码如下: function(){ window.scrollBy(0,100);... 附注：当滚动条到达页面最底部时，window.pageYOffset=1000-document.documentElement.clientHeight;
07-offsetHeight-scrollHeight-clientHeight-区别.md
最新发布
03-31
大厂前端面试题目|# 前端基础知识 ...本章将通过多个面试题，讲解前端常考的基础知识面试题，同时复习一些重要的...不会从 0 基础讲起，基础不熟悉可以向讲师提问 ## 看几个面试题 列几个代表性的面试题，参考视频。
document.body.scrollTop 的值总是等于 0 的解决方法;DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN 与
angelila0102的专栏
10-02 742
做页面的时候可能会用到浮动层，读取 document.body.scrollTop 来设置层的位置，如以下代码，可以达到让一个ID为“Div1”的层一直居中显示的目的： function Sc() { document.getElementById(“Div1″).style.top=document.body.scrollTop+(document.body.clientHei
document.body.clientHeight = 0 ??
u012309349的博客
10-22 628
使用document.documentElement.clientHeight和document.documentElement.clientWidth来取得窗口的高度和宽度。
getElementsByClassName
weixin_30895603的博客
01-06 39
今天做菜单时用了getElementsByClassName，FF、Chrome、Safari、Opera都可以的，就IE不支持。对IE这样的情况，我已经习以为常了，搜啊搜的，发现有人说IE可以用querySelectorAll("."+clsName)，试了试，还真对IE有效，而且貌似FF、Chrome、Safari、Opera也都有效，就先这么用着吧，偶还菜着呢，要深究下去也明白不了啥东东。总...
document.body.clientHeight 只是窗口高度四舍五入的结果，宽度也是如此
weixin_44350171的博客
12-19 3191
在测试拖拽时，要实现被拖拽的元素不能跟鼠标一起跑到窗口外； 所以 在style.top<0时使其style.top=0 在style.top<document.body.clientHeight - div1.offsetHeight时，使其style.top=document.body.clientHeight - div1.offsetHeight（即窗口高度 减去 元素高度，就是元素能被拖拽到的最低位置，当小于这个最小值时，直接把最小值赋值给它） 但是出现了一个bug，如下图 按理说我把
关于JS获取clientWidth大小一直为0的问题
liuhui12345的博客
08-20 4113
__.clientWidth = 0; 因为父集用了display:none; 所以取不到值，将父集设置为display: block;就行了
document.body.clientHeight 和 document.documentElement.clientHeight的区别
生存不忘生活
12-16 933
1.在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代doc
document.body.clientHeight 和 document.documentElement.clientHeight 的区别以及tomcat中路径大小写的问题...
weixin_33893473的博客
08-12 485
1、javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试，发现其中一个取得页面高度的变量 b...
// 可见区域高度 let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
06-13
其中，`window.innerHeight`表示浏览器窗口的内部高度，`document.documentElement.clientHeight`表示文档根元素的可见高度，`document.body.clientHeight`表示文档body元素的可见高度，三者取最小值作为可见区域...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值