document.documentElement.clientWidth与document.body.clientWidth在浏览器滚动条的情况

最新推荐文章于 2018-12-04 16:22:00 发布
最新推荐文章于 2018-12-04 16:22:00 发布
阅读量1.8k 收藏
点赞数 1
分类专栏： javascript

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中是这样的。其它浏览器没有测试。

一缕清风007
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端宽度一至显示宽度不一致_聊聊前端性能优化
weixin_31368213的博客
12-23 363
之前我写过一篇文章，主要是面向 React 框架的性能优化，实际上，面向浏览器、资源请求也可以作出很多的优化，很多很杂，本文对部分方案作了总结。合理利用缓存第一部分我们聊聊缓存，这是前后端一个很重要的知识点。缓存可以减少冗余传输、减少带宽、降低源服务器的压力。缓存的工作机制如下：浏览器先根据这个资源的 http 头信息来判断是否命中强缓存。如果命中则直接加在缓存中的资源，并不会将请求发送到服务器。...
document.documentElement.clientwidth和document.body
weixin_33847182的博客
09-15 2926
2019独角兽企业重金招聘Python工程师标准>>> ...
document.documentElement.clientWidth与document.body.clientWidth在浏览器滚动条的情况下，值是不一样的
踏雪听雨
06-09 5789
document.documentElement.clientWidth document.documentElement.clientHeight document.body.clientWidth document.body.clientHeight   body与documentElement这两个属性在浏览器的body设置成  时，得到的值是不同的。 当有overflow:hi
document.documentElement 和document.body 以及clientWidth
weixin_41201611的博客
12-27 1147
今天有用到这块的东西  在这里分享给小伙伴们 （原来HTML里是document.body  --XHTML里是document.documentElement ,都指的是节点(OR元素) ）   在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document .body.scrollTop等属性，
document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth
小猴的专栏
09-28 335
 注：（scrollHeight、offsetHeight、clientHeight 同样可按本文去理解。） 这是一个很复杂的问题，让我们想像一下： document.documentElement.scrollWidth document.documentElement.offsetWidth document.documentElement.clientWidth docu...
由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声明的页面时。在上面的代码段中，通过条件语句判断浏览器支持的滚动位置获取方式，既考虑了现代浏览器...
javascript document.compatMode兼容性
10-29
对于滚动条的左右位置`sLeft`和顶部位置`sTop`，由于在某些情况下可能存在差异，代码还做了一个条件判断，以确保获取正确的值。 总之，理解并使用`document.compatMode`可以帮助开发者更好地处理跨浏览器的兼容性...
document.documentElement.clientWidth为什么会取到0？
06-07
`document.documentElement.clientWidth`表示当前窗口的视口宽度，即浏览器可视区域的宽度，不包括滚动条的宽度。 如果`document.documentElement.clientWidth`取到0，可能有以下几种原因： 1. 当前文档中没有内容...
document.documentElement.clientWidth为什么会取到0
最新发布
06-07
`document.documentElement.clientWidth` 属性是获取当前文档可见区域的宽度，包括滚动条在内，但不包括边框。 如果 `document.documentElement.clientWidth` 值为0，可能是以下几种情况： 1. 当前文档没有内容或...
document.body.clientHeight 和 document.documentElement.clientHeight 的区别
weixin_34403693的博客
06-24 97
这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试，发现其中一个取得页面高度的变量 bodyHeight 一直是0。就是因为他是0，所以菜单才显示不出来。 而取得bodyHeight 高度的语句是 var bodyHeight = docu...
JS body.clientWidth,documentElement.clientWidth,clientX
生活需要用心
03-29 217
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
document.documentElement.clientWidth
ssisse的博客
05-14 7071
关于获取各种浏览器可见窗口大小的一点点研究 function getInfo() { var s = ""; s = " 网页可见区域宽：" document.body.clientWidth; s = " 网页可见区域高：" document.body.clientHeight; s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动
document.body.clientWidth vs document.documentElement.clientWidth
weixin_34364135的博客
10-17 223
http://blog.csdn.net/zb0567/article/details/7182391   mobile web javascript library http://www.gbin1.com/technology/jquerymobile/20120423mobilelib/   http://blog.163.com/pancheng9126@126/blog/sta...
关于window.innerHeight/innerWidth，document.documentElement.clientWidth/Height，document.body.clientWidt...
weixin_30516243的博客
12-04 807
一、window.innerWidth/Height => 获取浏览器可视区域宽/高度 ========①宽度：经测试，该属性获取的是包含滚动条宽度的（有的博客乃至菜鸟教程都认为他不包含）浏览器可视区域宽度②高度：但是高度却不包含工具栏高度，只是可视区域高度②IE 8 及更早 IE版本不支持这两个属性。=================== 二、document.documentEl...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值