解决document.body.clientWidth 或 document.body.clientHeight 为0的问题

最新推荐文章于 2020-12-19 14:54:39 发布
最新推荐文章于 2020-12-19 14:54:39 发布
阅读量827 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/liang--liang/archive/2012/12/14/2817538.html
本文介绍了解决IE7环境下无法正确获取窗口高度和宽度的方法，通过使用document.documentElement.clientHeight和document.documentElement.clientWidth代替document.body.clientHeight和document.body.clientWidth，确保在IE7、IE8、IE9及Firefox浏览器中都能正常工作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我们常用

document.body.clientHeight和document.body.clientWidth获得窗口的高和宽，

今天发现在IE8，IE9和firefox都没有问题，都能正常获得，但是在IE7下却都是为0

解决方法如下(IE7,IE8,IE9,firefox都没问题)：

使用document.documentElement.clientHeight和document.documentElement.clientWidth来取得窗口的高度和宽度。

 

 

转载于:https://www.cnblogs.com/liang--liang/archive/2012/12/14/2817538.html

vue el-tabs切换 不显示echarts 宽度为0
weixin_49261425的博客
12-28 1184
1.通过echarts不同的id，写不同的图，调用接口展示不同的图 <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="电厂" name="dc" > <div :id="'myChart1'" style="width:100%;height:160%;"></div> </el-tab-pane> &l
由document.body和document.documentElement想到的
09-06
1. `document.body.clientWidth`和`clientHeight`返回浏览器视口的宽度和高度，不包括滚动条。 2. `document.body.offsetWidth`和`offsetHeight`则包括了边框的宽度。 3. `document.body.scrollWidth`和`...
document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth
小猴的专栏
09-28 407
 注：（scrollHeight、offsetHeight、clientHeight 同样可按本文去理解。） 这是一个很复杂的问题，让我们想像一下： document.documentElement.scrollWidth document.documentElement.offsetWidth document.documentElement.clientWidth docu...
document.body.clientwidth值为0的解决方案
ForMyQianDuan的博客
03-24 4968
在IE7、IE8、Firefox中，document.body.clientWidth以及 document.body.clientHeightzhi值为0，此时，可以使用 document.documentElement.clientHeight等代替。   网络上普遍使用document.body.clientHeight和document.body.clientW
document.body.clientHeight 只是窗口高度四舍五入的结果，宽度也是如此
weixin_44350171的博客
12-19 3365
在测试拖拽时，要实现被拖拽的元素不能跟鼠标一起跑到窗口外； 所以 在style.top<0时使其style.top=0 在style.top<document.body.clientHeight - div1.offsetHeight时，使其style.top=document.body.clientHeight - div1.offsetHeight（即窗口高度 减去 元素高度，就是元素能被拖拽到的最低位置，当小于这个最小值时，直接把最小值赋值给它） 但是出现了一个bug，如下图 按理说我把
js取得clientWidth为0的解决
liuxiaoyue909的专栏
04-09 5401
在做图片分享的时候遇到过这么个问题，上网上搜了一下，有人也遇到过，解决方案都在下面，谢谢了！ 转载出处：js取得clientWidth为0的解决 今天由于需要计算div的占位等信息，需要拿到clientWidth，结果却发现一只是0；后来经过不断测试，发现如果不设置div的width属性，即width值为“auto”的情况下，clientWidth永远是0；只有在为width属性设置了
document.documentElement和document.body区别介绍
09-05
在标准模式下，则需要先判断document.documentElement.scrollLeft和document.documentElement.scrollTop是否为0，若是则使用document.body.scrollLeft和document.body.scrollTop。 了解了这些区别后，前端开发者在...
用document.documentElement取代document.body的原因分析
09-05
在JavaScript中，`document.body` 和 `document.documentElement` 是两个经常用来获取页面信息的对象，但它们之间存在一些重要的差异，尤其是在处理不同浏览器的兼容性问题时。`document.documentElement` 通常被...
doctype后如何获得body.clientHeight的方法
10-30
具体来说，原本归属于 `document.body` 的一些属性（如 `clientHeight`, `clientWidth`, `offsetWidth`, `offsetHeight`, `scrollWidth`, `scrollHeight`, `scrollTop`, 和 `scrollLeft`）会被重新分配给 `document....
document.documentElement 和document.body 以及clientWidth
weixin_41201611的博客
12-27 1276
今天有用到这块的东西  在这里分享给小伙伴们 （原来HTML里是document.body  --XHTML里是document.documentElement ,都指的是节点(OR元素) ）   在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document .body.scrollTop等属性，
offsetHeight、offsetWidth、clientWidth、clientHeight无法获取值得问题
zmx760102412的博客
04-15 6533
获取offsetWidth，和clientWidth的值时弹窗为0，在优快云上询问了一下才明白了原因：在HTML的声明下，屏幕宽高是隐藏的，如果想要获得值，就需要在css中定义一下HTML和body的高度为100%。
一个document.documentElement.clientWidth为0的问题
weisuochengxuyuan的专栏
12-27 942
http://hi.baidu.com/bluedream_119/item/26db5a73c9774344ee1e532a 一个document.documentElement.clientWidth为0的问题 关于获取各种浏览器可见窗口大小的一点点研究 function getInfo() { var s = ""; s = " 网页可见区域宽：" document.bo
offsetWidth或者clientWidth获取不到，值为0的坑
热门推荐
weixin_44679078的博客
05-21 1万+
遇到的问题： 今天在练习写一个自定义右键多级菜单的时候，遇到一个问题，就是第三级的子菜单定位不对，这个定位是依据父菜单的offsetWidth来确定的。打印了一下offsetWidth的值，一直都是0；在这里卡了很久。后来去搜索，原来元素不显示的时候offsetWidth的值是获取不到的，为0；但是我的三级子菜单是在二级子菜单显示的情况下才出现的。后来分析才发现，在显示三级子菜单之前会将所有菜单隐藏，然后通过事件冒泡显示三级菜单，再显示二级菜单，因此我就获取不到二级菜单的offsetWidth。 所以我解决
document.body.clientHeight 和 document.documentElement.clientHeight 的区别以及tomcat中路径大小写的问题...
weixin_33893473的博客
08-12 534
1、javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试，发现其中一个取得页面高度的变量 b...
document.body.clientHeight返回值为0的解决方案
weixin_33871366的博客
11-20 152
http://www.thinksaas.cn/group/topic/306287/ 使用HTML5 DOCTYPE，会出现document.body.clientHeight为0 网上查了一下， 貌似有很多个解决方案。 1. 使用document.documentElement.clientHeight获取。 当使用html5的时候，就会有documentElement在docum...
vue响应式网站PC端的宽度获取坑（已解决&新手向）
weixin_41033048的博客
05-30 898
一开始我是在mounted函数里面用这个方法获取宽度的document.body.clientWidth，结果出现了一加载进来就是值为0的情况。 找原因： 1.是不是watch监听不到所以为0，因此找深度监测去了，没卵用 2.是不是要写在created里面，或者update里，发现，没卵用 3.最后找的一个方法，原来是我的宽度获取的方式有问题，应该是document.documentElement.clientWidth 所以，问题就解决了 ...
document.body为null的问题
weixin_34380948的博客
09-24 632
      虽然body是JS中的DOM技术中所有浏览器支持的属性，但在我们的代码编写中，还是会碰到document.is null问题 例如：我们可以使用alert(document.body);的时候，就会提示Null。  解决方法： 原因很简单，是因为我们在body标签前或在body标签中就加载了或写的js代码，此时还没有body元素 问题的解决办法就是把调用到document....
var docWidth = document.body.clientWidth//网页可见宽 var docHeight = document.body.clientHeight//网页可见高，把这段代码改成元素宽高
05-31
假设要获取的元素的id为"elementId"，则可以使用以下代码来获取元素的宽度和高度： ``` var elementWidth = document.getElementById("elementId").clientWidth; // 元素可见宽度 var elementHeight = document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值