document.documentElement.clientWidth与document.body.clientWidth在浏览器滚动条的情况下，值是不一样的

最新推荐文章于 2024-04-14 20:36:38 发布
原创 最新推荐文章于 2024-04-14 20:36:38 发布 · 5.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#浏览器 #firefox #测试 #ie

本文探讨了在不同浏览器环境下，如何准确获取网页的真实可视区域尺寸。特别指出，在设置了overflow:hidden的情况下，使用body.clientHeight能获得更准确的高度值。

document.documentElement.clientWidth

document.documentElement.clientHeight

document.body.clientWidth

document.body.clientHeight

 

body与documentElement这两个属性在浏览器的body设置成<body style="overflow:hidden">  时，得到的值是不同的。

当有overflow:hidden时，body.clientHeight才是真实值，documentElement.clientHeight是没有滚动条的值。

 

IE，FIREFOX中是这样的。其它浏览器没有测试。

由document.body和document.documentElement想到的
09-06
1. `document.body.clientWidth`和`clientHeight`返回浏览器视口的宽度和高度，不包括滚动条。 2. `document.body.offsetWidth`和`offsetHeight`则包括了边框的宽度。 3. `document.body.scrollWidth`和`...
用document.documentElement取代document.body的原因分析
09-05
在某些情况下，`document.documentElement` 的这些属性更能准确反映用户滚动条的位置，尤其是在处理具有DOCTYPE声明的页面时。在上面的代码段中，通过条件语句判断浏览器支持的滚动位置获取方式，既考虑了现代浏览器...
document.documentElement 和document.body 以及clientWidth
weixin_41201611的博客
12-27 1357
今天有用到这块的东西  在这里分享给小伙伴们 （原来HTML里是document.body  --XHTML里是document.documentElement ,都指的是节点(OR元素) ）   在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document .body.scrollTop等属性，
document.documentElement.clientwidth和document.body
weixin_33847182的博客
09-15 3123
2019独角兽企业重金招聘Python工程师标准>>> ...
document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth
小猴的专栏
09-28 426
 注：（scrollHeight、offsetHeight、clientHeight 同样可按本文去理解。） 这是一个很复杂的问题，让我们想像一下： document.documentElement.scrollWidth document.documentElement.offsetWidth document.documentElement.clientWidth docu...
document.documentElement.clientHeight与document.body.clientHeight的区别
galaxyJING的博客
03-22 1369
scrollHeight: 当元素的子元素高度大于父元素，父元素出现滚动条，此时父元素的clientHeight表示可视的高度，父元素的scrollHeight 表示页面的高度，包括溢出页面被挡住的部分，即其实就是子元素的高度。单位px，只读元素。clientHeight： 表示可视区域高度， 包括padding但不包括border、水平滚动条、margin的元素的高度。offsetHeight：表示可视区域高度，包括padding、border、水平滚动条，但不包括margin的元素的高度。
document.body.clientHeight 和 document.documentElement.clientHeight 的区别
weixin_34403693的博客
06-24 133
这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试，发现其中一个取得页面高度的变量 bodyHeight 一直是0。就是因为他是0，所以菜单才显示不出来。 而取得bodyHeight 高度的语句是 var bodyHeight = docu...
window.innerWidth和document.documentElement.clientWidth的区别
最新发布
06-19
在某些情况下，例如需要调整元素的布局或进行响应式设计时，选择使用 `window.innerWidth` 还是 `document.documentElement.clientWidth` 取决于是否需要考虑滚动条的影响。 #### 兼容性问题 需要注意的是，在旧版...
javascript document.compatMode兼容性
10-29
对于滚动条的左右位置`sLeft`和顶部位置`sTop`，由于在某些情况下可能存在差异，代码还做了一个条件判断，以确保获取正确的值。 总之，理解并使用`document.compatMode`可以帮助开发者更好地处理跨浏览器的兼容性...
document.documentElement.clientWidth为什么会取到0？
06-07
`document.documentElement.clientWidth`表示当前窗口的视口宽度，即浏览器可视区域的宽度，不包括滚动条的宽度。 如果`document.documentElement.clientWidth`取到0，可能有以下几种原因： 1. 当前文档中没有内容...
JS body.clientWidth,documentElement.clientWidth,clientX
生活需要用心
03-29 265
event的x，clientX，offsetX，screenX ·         x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。 ·         clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。 ·         offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 ·         scr...
js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。
热门推荐
zjlovety的专栏
07-28 3万+
网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHei
前端宽度一至显示宽度不一致_聊聊前端性能优化
weixin_31368213的博客
12-23 460
之前我写过一篇文章，主要是面向 React 框架的性能优化，实际上，面向浏览器、资源请求也可以作出很多的优化，很多很杂，本文对部分方案作了总结。合理利用缓存第一部分我们聊聊缓存，这是前后端一个很重要的知识点。缓存可以减少冗余传输、减少带宽、降低源服务器的压力。缓存的工作机制如下：浏览器先根据这个资源的 http 头信息来判断是否命中强缓存。如果命中则直接加在缓存中的资源，并不会将请求发送到服务器。...
javascript基础学习系列三百八十八：窗口大小
m0_68635815的博客
03-14 798
在其他移动浏览器中，document.documentElement.clientWidth 和 document.documentElement. clientHeight 返回的布局视口的大小，即渲染页面的实际大小。在移动设备上，window.innerWidth 和 window.innerHeight 返回视口的大小，也就是屏幕上页面可视区域的大小。这 3 个方法都接收表示相对视口距离的 x 和 y 坐标，这两个参数在前两个方法中表示要滚动到的坐标，在最后一个方法中表示滚动的距离。
document.documentElement.clientWidth
ssisse的博客
05-14 7183
关于获取各种浏览器可见窗口大小的一点点研究 function getInfo() { var s = ""; s = " 网页可见区域宽：" document.body.clientWidth; s = " 网页可见区域高：" document.body.clientHeight; s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动
前端大屏适配几种方案
小李在努力学习
04-14 3151
直接使用vw单位，屏幕宽度默认为100vw，那么100vw = 1920px；这个也是使用cssrem插件，直接将body的宽高（1920px * 1080px），将px转成vw单位。针对1920 * 1080,3840 * 2160(4k)是没有问题的，但是在超宽屏的情况下还是存在只显示一半的问题。打开js文件，将设计稿的宽度（1920px）平均分成24等份，每一份为80px。tips：rem是根据html字体大小来计算的，假如html字体为16px，则1rem就等于16px；
document.body.clientHeight 和 document.documentElement.clientHeight的区别
TrustNature
07-05 140
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 实例...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值