document.body.clientHeight的取值

最新推荐文章于 2024-04-30 22:06:17 发布
最新推荐文章于 2024-04-30 22:06:17 发布
阅读量140 收藏
点赞数
文章标签： xhtml
原文链接：https://yq.aliyun.com/articles/543237
版权

[JS]document.body.clientHeight的取值

有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句"hello world" , 也仍然取到720.

可是在XHTML中, 如果body 体中只有一行, 则document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度, 就要用document.documentElement.clientHeight 来获取了.

原因是: 在HTML 中, body 是整个DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值.

区别新旧标准的行是:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
前者指明该页面使用旧标准, 后者指明该页面使用新标准.

总结:
XHTML中用 document.documentElement.clientHeight 代替
document.body.clientHeight


本文转自 潜心笃志 51CTO博客，原文链接:http://blog.51cto.com/82711020/2045395

weixin_34273479
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用document.documentElement取代document.body的原因分析
01-19
上次的测试说明了document.body属性并不会给我们返回预期的结果，比如我们用document.body.clientHeight原本想取得“页面可见区域高度”，可实际上返回的是“页面实际内容高度”。 那我们怎么办呢？难道加上了文档...
document.body.clientHeight 只是窗口高度四舍五入的结果，宽度也是如此
weixin_44350171的博客
12-19 3171
在测试拖拽时，要实现被拖拽的元素不能跟鼠标一起跑到窗口外； 所以 在style.top<0时使其style.top=0 在style.top<document.body.clientHeight - div1.offsetHeight时，使其style.top=document.body.clientHeight - div1.offsetHeight（即窗口高度 减去 元素高度，就是元素能被拖拽到的最低位置，当小于这个最小值时，直接把最小值赋值给它） 但是出现了一个bug，如下图 按理说我把
body.clientHeight与documentElement.clientHeight
weixin_34116110的博客
10-08 126
body上的clientHeight会对着内容区域的高度变化而变化，当内容只有100px，则body上只有100px被撑起，返回的clientHeight为100； documentElement.clientHeight:不会随着内容区域的变化而变化，始终是窗口的可见区域大小。 转载于:https://www.cnblogs.com/lydialee/p/4860978.htm...
document.documentElement.clientHeight与document.body.clientHeight的区别
galaxyJING的博客
03-22 410
scrollHeight: 当元素的子元素高度大于父元素，父元素出现滚动条，此时父元素的clientHeight表示可视的高度，父元素的scrollHeight 表示页面的高度，包括溢出页面被挡住的部分，即其实就是子元素的高度。单位px，只读元素。clientHeight： 表示可视区域高度， 包括padding但不包括border、水平滚动条、margin的元素的高度。offsetHeight：表示可视区域高度，包括padding、border、水平滚动条，但不包括margin的元素的高度。
document.body.clientHeight = 0 ??
u012309349的博客
10-22 618
使用document.documentElement.clientHeight和document.documentElement.clientWidth来取得窗口的高度和宽度。
让body的clientHeight与html的clientHeight相等的方法
dayanwu2842的博客
05-03 98
body元素是自适应高度的块级元素，当页面内容比较少时，它的高度会小于默认浏览器的可是区域高度；html元素的高度是默认等于浏览器视窗的高度的 从文档结构上来说 body是html的子元素，按道理设置body{ height:100%;},可以让它和html元素高度相等，实际发现没没效果。需要设置 html,body{height:100%}才能让两者的高度相等 测试代码如下： ...
doctype后如何获得body.clientHeight的方法
12-02
在ie6中很多js脚本执行就会出现问题，一般是在获取clientWidth, clientHeight,... 比如：原来document.body.clientHeight，就要改成document.documentElement.scrollTop 为了自适应，可以改了下代码： ((docum
关于window.pageYOffset和document.documentElement.scrollTop
12-10
举个例子： Css:假定进行如下简单设置；...} JS： 代码如下: function(){ window.scrollBy(0,100);... 附注：当滚动条到达页面最底部时，window.pageYOffset=1000-document.documentElement.clientHeight;
取得窗口大小 兼容所有浏览器的js代码
12-11
取得窗口大小的代码： 代码如下: var pageWidth = window.innerWidth, var pageHeight = window.innerHeight; if(typeof pageWidth != “number”){ if(document.compatMode ... }else{ pageWidth = document.body.clie
web标准与document.body.clientHeight
李玉銮的Blog
12-31 996
网页加了这么一行http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">document.body.clientHeight就不可用,解决方法如下:在Quirks渲染模式下作为文档的根，所以可以用document.body.clientHeight得到文档的高度。而在Standar
关于JavaScript中document.body.clientHeight获取页面高度为0的问题及解决方案
chad273的博客
01-03 3249
js中如下语句 h = document.body.clientHeight； 获得的 h 值始终为0，找了半天终于解决，将代码改写如下即可： h = document.documentElement.clientHeight； 初学js，具体原因还不懂，貌似和DOM中从层次不同有关，有待继续学习研究。同时希望大神帮忙解答。 ...
关于body.clientHeight，body.clientWidht获取的不是可视高度的问题
qq_42814833的博客
08-05 649
我发现网上一些教程可能都是10几年前的老古董了，经过不知道多少号复制翻新，导致有时候你很难去发现问题，甚至是大部分的教程都是这么写的，害人不浅。问题的经过是这样的，我需要获取页面的可视高度。网上搜一搜，全部都说使用body.clientHeight来获取，结果嘛获取的是body的总高度。总结一下，在标准模式下使用根节点来获取可视高度才是正确的。要使用的是根节点的clientHeight，也就是。所谓标准模式的判定是你在HTML文件上方声明了。经过我一番查找，发现问题所在。下才能返回可视高度，在。......
documen.body.clientHeight的取值问题。
weixin_34220179的博客
12-24 310
有的时候要去页面的顶部到底部的高度时就要用到document.body.clientHeight来获得。 在HTML中无论body的高度是多少只要用documen.body.clientHeight就能获得到底有多高，例如：1074*768分辨率取得的值就是768.即使body中只有一句“hello world” 也能获得到底的高度。 但是在XHTML中如果body只有一行的话，那么使用d...
document.body.clientHeight与document.documentElement.clientHeight的区别
weixin_30849591的博客
06-25 154
document.body.clientHeight与document.documentElement.clientHeight 1 document.body.clientHeight是指页面body元素的的高度，但是如果你的body是这样的： <body> <div class="bg"> <img src="./img/123...
常见的 HTML 标准
csdn_ad986ad的博客
04-30 867
HTML（Hypertext Markup Language）有多个版本和标准。
node-v0.8.10-sunos-x64.tar.gz
最新发布
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
【课程设计】实现的金融风控贷款违约预测python源码.zip
05-16
【课程设计】实现的金融风控贷款违约预测python源码.zip
// 可见区域高度 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、付费专栏及课程。

余额充值