web标准与document.body.clientHeight

最新推荐文章于 2024-03-22 14:25:18 发布
最新推荐文章于 2024-03-22 14:25:18 发布
阅读量999 收藏
点赞数
分类专栏： javascript 文章标签： web xhtml html 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/engzs/article/details/1470652
版权

网页加了这么一行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
document.body.clientHeight就不可用,解决方法如下:

在Quirks渲染模式下<body>作为文档的根，所以可以用document.body.clientHeight得到文档的高度。而在Standard渲染模式下，<html>作为文档的根，需要使用document.documentElement.clientHeight才可以得到。此时document.body的高度和宽度都为0 

engzs
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
doctype后如何获得body.clientHeight的方法
12-02
在ie6中很多js脚本执行就会出现问题，一般是在获取clientWidth, clientHeight,offsetWidth, offsetHeight,scrollWidth, scrollHeight,scrollTop, scrollLeft会返回不正确的值。 因为在加了doctype后，在ie6中这些document.body的属性已经重新分配给了document.documentElement。 比如：原来document.body.clientHeight，就要改成document.documentElement.scrollTop 为了自适应，可以改了下代码： ((docum
由document.body和document.documentElement想到的
09-06
在Web开发中，理解和掌握`document.body`和`document.documentElement`的区别至关重要，尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分：`document.body`指的是HTML文档的实际内容...
【HTML5】关于document.body.clientHeight返回值为0的解决方案
Duawieh的博客
07-29 1096
网上关于此问题的其中一种解决方案是使用HTML4，但是如果我们希望在保持HTML5版本不变的前提下解决此问题呢？标签添加上文所述样式即可，添加样式的方式不限，然后我们就可以在 Javascript 中正常调用了。这里引用一下@kelly0721的博客中的图片，为各位展示一下我们可以获取的各种屏幕元素尺寸。可见其正常输出了页面可见区域高度，并且能够随屏幕缩放实时地得到不同的值。正是浏览器页面可见区域的高度。
document.body.clientHeight 只是窗口高度四舍五入的结果，宽度也是如此
weixin_44350171的博客
12-19 3210
在测试拖拽时，要实现被拖拽的元素不能跟鼠标一起跑到窗口外； 所以 在style.top<0时使其style.top=0 在style.top<document.body.clientHeight - div1.offsetHeight时，使其style.top=document.body.clientHeight - div1.offsetHeight（即窗口高度 减去 元素高度，就是元素能被拖拽到的最低位置，当小于这个最小值时，直接把最小值赋值给它） 但是出现了一个bug，如下图 按理说我把
关于JavaScript中document.body.clientHeight获取页面高度为0的问题及解决方案
chad273的博客
01-03 3282
js中如下语句 h = document.body.clientHeight； 获得的 h 值始终为0，找了半天终于解决，将代码改写如下即可： h = document.documentElement.clientHeight； 初学js，具体原因还不懂，貌似和DOM中从层次不同有关，有待继续学习研究。同时希望大神帮忙解答。 ...
document.body.clientHeight获取可视区域高度为0问题解决
jieyucx的博客
10-24 364
打印出来的currentHeight是0。为body加上如下css。
document.compatMode介绍
09-06
在Quirks Mode下，IE和其他一些早期浏览器的行为可能会导致元素的尺寸、定位和布局与标准模式有所不同，特别是在处理盒模型时。 `document.compatMode` 就是用来检测当前文档是在使用哪种渲染模式。如果值为 "CSS1...
关于window.pageYOffset和document.documentElement.scrollTop
09-05
在Web开发中，特别是在处理页面滚动事件时，`window.pageYOffset` 和 `document.documentElement.scrollTop` 是两个非常重要的属性。它们都是用来获取用户在浏览器窗口中滚动的位置，即浏览器视口距离文档顶部的距离...
Web前端开发技术-client和scroll应用.pptx
07-07
通过 JavaScript 的 `document.querySelector` 方法选取元素，并使用 `clientWidth` 和 `clientHeight` 等属性，我们可以实时获取元素的可视区域数据。 2. **元素滚动scroll应用**： `scroll` 系列属性则关注元素...
浅谈DOCTYPE对$(window).height()取值的影响
09-01
这段代码首先检查文档高度是否大于窗口高度，如果是，则使用`document.body.clientHeight`获取窗口高度，因为在这种模式下，它能正确反映可视区域的高度。否则，直接使用$(window).height()，这适用于内容未超过一...
关于body.clientHeight，body.clientWidht获取的不是可视高度的问题
qq_42814833的博客
08-05 672
我发现网上一些教程可能都是10几年前的老古董了，经过不知道多少号复制翻新，导致有时候你很难去发现问题，甚至是大部分的教程都是这么写的，害人不浅。问题的经过是这样的，我需要获取页面的可视高度。网上搜一搜，全部都说使用body.clientHeight来获取，结果嘛获取的是body的总高度。总结一下，在标准模式下使用根节点来获取可视高度才是正确的。要使用的是根节点的clientHeight，也就是。所谓标准模式的判定是你在HTML文件上方声明了。经过我一番查找，发现问题所在。下才能返回可视高度，在。......
document.documentElement.clientHeight与document.body.clientHeight的区别
最新发布
galaxyJING的博客
03-22 589
scrollHeight: 当元素的子元素高度大于父元素，父元素出现滚动条，此时父元素的clientHeight表示可视的高度，父元素的scrollHeight 表示页面的高度，包括溢出页面被挡住的部分，即其实就是子元素的高度。单位px，只读元素。clientHeight： 表示可视区域高度， 包括padding但不包括border、水平滚动条、margin的元素的高度。offsetHeight：表示可视区域高度，包括padding、border、水平滚动条，但不包括margin的元素的高度。
document.body.clientHeight
weixin_33835690的博客
03-03 186
document.body.clientWidth ==&gt; BODY对象宽度（也是可见区） document.body.clientHeight ==&gt; BODY对象高度（也是可见区） document.documentElement.clientWidth ==&gt; 可见区域宽度 document.documentElement.clientHeight ==&gt; 可见...
document.body.clientHeight 和 document.documentElement.clientHeight 的区别以及tomcat中路径大小写的问题...
weixin_33893473的博客
08-12 488
1、javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试，发现其中一个取得页面高度的变量 b...
document.documentElement.clientHeight与document.body.clientHeight的区别解析
qq_37734787的博客
03-21 1215
document.documentElement指的是元素 document.bodyt指的是元素 document.documentElement.clientHeight 屏幕可视区域高度
html5中document.body.clientHeight返回0
rongyong的专栏
03-12 2086
在CSS中设置：html,body{height:100%;}
document.body.clientHeight返回值为0的解决方案
热门推荐
web前端菜鸟工程师
01-12 1万+
最近在做一个div内容高度在不同浏览器下的高度自适应，发现document.body.clientHeight的返回值为0. 网上查了一下， 貌似有很多个解决方案。  1. 使用document.documentElement.clientHeight获取。  当使用html5的时候，就会有documentElement在document下。  如上图所示 ， 左边为c
documen.body.clientHeight的取值问题。
weixin_34220179的博客
12-24 324
有的时候要去页面的顶部到底部的高度时就要用到document.body.clientHeight来获得。 在HTML中无论body的高度是多少只要用documen.body.clientHeight就能获得到底有多高，例如：1074*768分辨率取得的值就是768.即使body中只有一句“hello world” 也能获得到底的高度。 但是在XHTML中如果body只有一行的话，那么使用d...
// 可见区域高度 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、付费专栏及课程。

余额充值