document.documentElement.clientWidth

最新推荐文章于 2022-10-20 15:09:19 发布
最新推荐文章于 2022-10-20 15:09:19 发布
阅读量7k 收藏 21
点赞数 5
分类专栏： html

关于获取各种浏览器可见窗口大小的一点点研究

<script>
function getInfo()
{
var s = "";
s = " 网页可见区域宽：" document.body.clientWidth;
s = " 网页可见区域高：" document.body.clientHeight;
s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)";
s = " 网页可见区域高：" document.body.offsetHeight " (包括边线的宽)";
s = " 网页正文全文宽：" document.body.scrollWidth;
s = " 网页正文全文高：" document.body.scrollHeight;
s = " 网页被卷去的高(ff)：" document.body.scrollTop;
s = " 网页被卷去的高(ie)：" document.documentElement.scrollTop;
s = " 网页被卷去的左：" document.body.scrollLeft;
s = " 网页正文部分上：" window.screenTop;
s = " 网页正文部分左：" window.screenLeft;
s = " 屏幕分辨率的高：" window.screen.height;
s = " 屏幕分辨率的宽：" window.screen.width;
s = " 屏幕可用工作区高度：" window.screen.availHeight;
s = " 屏幕可用工作区宽度：" window.screen.availWidth;

s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色";
s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸";
//alert (s);
}
getInfo();
</script>


在本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。

而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight

可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight

原来是W3C的标准在作怪啊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话 在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）


而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）



本文转自：http://blog.sina.com.cn/s/blog_6f1f9ead0100n1f6.html

ssisse
关注
  • 5
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
document.documentElement.clientwidth和document.body
weixin_33847182的博客
09-15 2906
2019独角兽企业重金招聘Python工程师标准>>> ...
用document.documentElement取代document.body的原因分析
09-05
在JavaScript中，`document.body` 和 `document.documentElement` 是两个经常用来获取页面信息的对象，但它们之间存在一些重要的差异，尤其是在处理不同浏览器的兼容性问题时。`document.documentElement` 通常被...
index.html
05-27
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>跳动的小球</title> <style type="text/css"> *{margin:0;padding:0;font-family:"Microsoft Yahei";} body{ overflow: hidden; } #box{ position: absolute; z-index: 1; top: 0; left: 0; width: 50px; height: 50px; background: radial-gradient(#ff0,#f00); border-radius: 50%; } .shadow{ position: absolute; width: 50px; height: 50px; background: pink; border-radius: 50%; transform: scale(1); opacity: 1; animation: hide .5s 1; animation-fill-mode: forwards; } @keyframes hide { from{transform: scale(1);opacity: 1} to{transform: scale(0);opacity: 0} } </style> </head> <body> <div id="box"></div> <script type="text/javascript"> (function(){ //获取节点 let oBox = document.getElementById("box"); //提前计算好最大值限制 let maxH = document.documentElement.clientHeight - 50, maxW = document.documentElement.clientWidth - 50; //监听resize，改变maxH,maxW window.onresize = function(){ maxH = document.documentElement.clientHeight - 50; maxW = document.documentElement.clientWidth - 50; }; //提前定义好，水平方向的速度 和 垂直方向的速度 let Vx = 20,Vy = 8; (function m(){ //先计算球即将要到达的位置 let left = oBox.offsetLeft + Vx, top = oBox.offsetTop + Vy; //做边界判断 if ( left >= maxW ){ left = maxW; Vx = -Vx; } if (top >= maxH){ top = maxH; Vy = -Vy; } if (left <= 0){ left = 0; Vx = -Vx; } if(top <= 0){ top = 0; Vy = -Vy; } //改变样式 oBox.style.left = left + 'px'; oBox.style.top = top + 'px'; //每次帧动画时创建一个相同大小的球 createShadow(left,top); requestAnimationFrame(m); })(); //阴影盒子的生产 function createShadow(left,top){ let div = document.createElement("div"); div.classList.add("shadow"); div.style.cssText = `left:${left}px;top:${top}px;`; document.body.appendChild(div); setTimeout(()=>{ document.body.removeChild(div); div = null; },1000) } })(); </script> </body> </html>
同样是获取页面窗口的大小：innerWidth和document.documentElement.clientWidth的区别
YY的博客
10-20 543
innerWidth和document.documentElement.clientWidth的区别
JS Javascript获取用户视口宽(响应式准备) window.innerWidth以及document.documentElement.clientWidth以及相关兼容解决
箜的博客
01-11 1603
JS Javascript 获取用户视口宽 window.innerWidth以及document.documentElement.clientWidth以及相关兼容解决获取用户视口宽高为下一节响应式布局做准备包括滚动条的浏览器宽度高度获取方式 window.inner不包括滚动条的浏览器宽度高度获取方式当有文档声明时:document.documentElement当没有文档声明时:document.body 获取用户视口宽高为下一节响应式布局做准备 包括滚动条的浏览器宽度高度获取方式 window.in
document.documentElement 和document.body 以及clientWidth
weixin_41201611的博客
12-27 1112
今天有用到这块的东西  在这里分享给小伙伴们 （原来HTML里是document.body  --XHTML里是document.documentElement ,都指的是节点(OR元素) ）   在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document .body.scrollTop等属性，
关于window.innerHeight/innerWidth，document.documentElement.clientWidth/Height，document.body.clientWidt...
weixin_30516243的博客
12-04 801
一、window.innerWidth/Height => 获取浏览器可视区域宽/高度 ========①宽度：经测试，该属性获取的是包含滚动条宽度的（有的博客乃至菜鸟教程都认为他不包含）浏览器可视区域宽度②高度：但是高度却不包含工具栏高度，只是可视区域高度②IE 8 及更早 IE版本不支持这两个属性。=================== 二、document.documentEl...
document.documentElement.clientWidth为0的问题
suzsoft_yz的专栏
11-04 719
    1. http://www.cnblogs.com/ConjurerYang/archive/2009/08/12/1544251.html 2. http://hi.baidu.com/bluedream_119/item/26db5a73c9774344ee1e532a   1、javascript中的 document.body.clientHeight 和 docum...
document.documentElement对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
热门推荐
weixin_40568715的博客
05-17 1万+
转载自 @鬼眼邪神document.documentElement.clientWidth获取浏览器窗口文档显示区域的宽度，不包括滚动条。document.documentElement.clientHeight获取浏览器窗口文档显示区域的高度，不包括滚动条。浏览器兼容性所有浏览器解释都一样。document.documentElement.offsetWidth获取DOM文档的根节点html元素...
document.documentElement.clientWidth与document.body.clientWidth在浏览器滚动条的情况
weixin_34349320的博客
07-12 951
为什么80%的码农都做不了架构师？>>> ...
由document.body和document.documentElement想到的
09-06
1. `document.body.clientWidth`和`clientHeight`返回浏览器视口的宽度和高度，不包括滚动条。 2. `document.body.offsetWidth`和`offsetHeight`则包括了边框的宽度。 3. `document.body.scrollWidth`和`...
javascript document.compatMode兼容性
10-29
var cWidth = document.documentElement.clientWidth; var cHeight = document.documentElement.clientHeight; var sWidth = document.documentElement.scrollWidth; var sHeight = document.documentElement....
document.compatMode的CSS1compat使用介绍
09-04
在这种模式下，如果你想要获取浏览器视口的宽度，你应该使用 `document.documentElement.clientWidth`。这是因为 `document.documentElement` 指向HTML根元素，它在标准模式下包含了整个页面的内容，包括边距和滚动...
document.body.clientWidth vs document.documentElement.clientWidth
weixin_34364135的博客
10-17 218
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...
pillow-10.4.0-pp39-pypy39_pp73-macosx_11_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp35-cp35m-macosx_10_9_x86_64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-cp39-cp39-musllinux_1_2_x86_64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
1250KVA本体基础图11
最新发布
07-27
1250KVA本体基础图11
document.documentelement.clientwidth
03-16
`document.documentElement.clientWidth` 是一个 JavaScript 中的属性，表示当前文档根元素的可见宽度，即浏览器窗口中文档的宽度，但不包括滚动条的宽度。 该属性返回的值是一个数字，单位为像素（px）。在移动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值