用document.body.clientWidth不能获取准确值的问题

最新推荐文章于 2023-02-20 20:27:19 发布
最新推荐文章于 2023-02-20 20:27:19 发布
阅读量1w 收藏 1
点赞数
分类专栏： 网站前台布局以及UI技术 文章标签： xhtml html 文档 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tmoonlight/article/details/2471078
版权
 网络上普遍使用document.body.clientHeight和document.body.clientWidth获得窗口的高和宽。但是使用VS2005创建的页面中,却无法使用这两个属性获得准确的窗口高度和宽度。 原因: VS2005创建的页面遵循XHTML 1.0文档标准, 在HTML的头中声明如下:        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 解决方法: 使用document.documentElement.clientHeight和document.documentElement.clientWidth来取得窗口的高度和宽度。
tmoonlight
关注
专栏目录
document.documentElement和document.body区别介绍
09-05
例如，获取浏览器的宽度和高度，如果处于怪异模式，可以使用document.body.clientWidth和document.body.clientHeight；如果处于标准模式，则使用document.documentElement.clientWidth和document.documentElement....
document.body.clientHeight不能正确取到浏览器页面高度
weixin_34375054的博客
02-06 9287
2019独角兽企业重金招聘Python工程师标准>>> ...
网页宽高clientWidth clientHeight获得数值不对的问题
weixin_30663391的博客
07-12 3016
当网页内容撑不满一屏时，通过以下代码获得整个网页高度会有问题 document.body.clientHeight;document.body.clientWidth;得到的宽高不对，可能是因为html与body标签缺一个样式：height:100%设置如下： html{ height: 100%; overflow: h...
clientWidth，clientHeight 窗口宽高获取异常问题记录
qq_41206597的博客
03-18 1842
获取窗口可视化宽高，实际获取与，盒模型展示差异问题解决记录
获取浏览器显示窗口大小始终不会发生改变的问题
feng的博客
09-10 512
在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小：代码如下复制代码 document.documentElement.clientWidth //宽度 document.documentElement.clientHeight //高度 也就是说必须在声明DOCTYPE的html文件中才能获取到 ...
获取officewidth,height；clientwidth,height scrollwidth,height.......等,结果为0的原因
weixin_44447804的博客
11-13 544
officewidth,height;clientwidth,height scrollwidth,height 等 这类属性只有在渲染完成后,生成DOM树才能获取到值,如果没渲染就获取,值始终为0 注意: 内联元素 如span等 , 没有这些值; 解决方法: 调整 获取这类值的代码 的执行顺序,将其放在页面渲染完成后执行! ...
offsetHeight、offsetWidth、clientWidth、clientHeight无法获取值得问题
zmx760102412的博客
04-15 6380
获取offsetWidth，和clientWidth的值时弹窗为0，在CSDN上询问了一下才明白了原因：在HTML的声明下，屏幕宽高是隐藏的，如果想要获得值，就需要在css中定义一下HTML和body的高度为100%。
用document.documentElement取代document.body的原因分析
09-05
总的来说，使用 `document.documentElement` 取代 `document.body` 是为了在不同浏览器和DOCTYPE声明下获取更准确、更一致的页面尺寸和位置信息，特别是在处理滚动行为和可视区域时。开发者应当了解这两个对象的区别...
由document.body和document.documentElement想到的
09-06
1. `document.body.clientWidth`和`clientHeight`返回浏览器视口的宽度和高度，不包括滚动条。 2. `document.body.offsetWidth`和`offsetHeight`则包括了边框的宽度。 3. `document.body.scrollWidth`和`...
document.body.scrollTop用法
12-16
### document.body.scrollTop 用法详解 #### 一、概述 `document.body.scrollTop` 是一个用于获取或设置浏览器中...希望本文能帮助您更深入地理解 `document.body.scrollTop` 的使用技巧及其在实际项目中的应用场景。
同样是获取页面窗口的大小：innerWidth和document.documentElement.clientWidth的区别
YY的博客
10-20 575
innerWidth和document.documentElement.clientWidth的区别
document.documentElement.clientWidth
CL1250887989的博客
04-25 338
关于获取各种浏览器可见窗口大小的一点点研究<script>function getInfo(){var s = "";s = " 网页可见区域宽：" document.body.clientWidth;s = " 网页可见区域高：" document.body.clientHeight;s = " 网页可见区域宽：" document.body.offsetWidth " (...
JS：document.documentElement对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
热门推荐
鬼眼邪神
05-10 2万+
document.documentElement.clientWidth 获取浏览器窗口文档显示区域的宽度，不包括滚动条。 document.documentElement.clientHeight 获取浏览器窗口文档显示区域的高度，不包括滚动条。 浏览器兼容性 所有浏览器解释都一样。 document.documentElement.offsetWidth 获取DOM文档的根节点html元素对象
获取屏幕分辨率不符
年三十的博客
08-11 829
代码通过window.screen.height去获取屏幕分辨率，PC端没有问题 有一天在iPad上测试，发现页面宽度只有一半展示，发现了这个问题 后查阅发现，是因为屏幕有【物理分辨率：即硬件所支持的（比如：手机的分辨率）】和【逻辑分辨率：即软件所能到达（比如：各种像素单位在不同屏幕下，设备像素比例是不同的）】之分 解决办法： 1.添加meta标签<meta name="viewpo...
clientWidth/offsetWidth/scrollWidth获取为值非自身实际宽度而是屏幕宽度
bigPatrickstar的博客
05-07 565
clientWidth/offsetWidth/scrollWidth 今天碰到了三个老 6 获取值老是为屏幕的宽度而不是自身宽度，代码如下 <body> <div class="parent"> <div class="children"></div> </div> </body> <script> const element = document.querySelector(".children"); c
JS高级编程 -- day04
m0_48625424的博客
02-20 205
dom
webview document.body.scrollHeight 获取的高度不准确
XiaoZhuang__的博客
05-28 1184
解决方案 1、给富文本加上meta标签 适配移动端 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 2、我们对img进行处理 <style type="text/css"> img{ display: inline-block; max-width: 100%; } </style&gt
esize () { // 系统整体缩放 let cliWidth = document.documentElement.clientWidth || document.body.clientWidth le
最新发布
09-28
它通过获取文档元素的clientWidth属性（如果可用则取document.documentElement，否则取body），然后返回这个值。这个值通常代表浏览器视口的实际宽度，开发者可以利用这个信息来调整布局或样式，使其适应不同屏幕...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值