js中各种高度和宽度的获取方式

逃离我推掉我的手 2022-08-09 06:58 160阅读 0赞

<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高）  
真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。  
有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074\*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句”hello world” , 也仍然取到720.  
可是在XHTML中, 如果body 体中只有一行, 则document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度, 就要用document.documentElement.clientHeight 来获取了.  
原因是: 在HTML 中, body 是整个DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值.  
  
**区别新旧标准的行是**:  
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” >  
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>  
前者指明该页面使用旧标准, 后者指明该页面使用新标准.

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 js中各种高度和宽度的获取方式

<script> function getInfo() \{ var s = ""; s += " 网页可见区域宽："+ document.body.clien

逃离我推掉我的手/ 2022年08月09日 06:58/ 0 赞/ 161 阅读

相关 js、jQuery获取页面中的各种宽度和高度

在JavaScript和jQuery中，对获取各种高度和宽度都有定义方法和属性，下面我们主要来说明一下获取窗口和文档的高度（宽度与高度相同）。 jQuery中

秒速五厘米/ 2022年07月17日 01:26/ 0 赞/ 390 阅读

相关 js,jquery获取各种屏幕的高度，宽度

![116165-20160630110328843-2101737128.png][] 关于js,jquery获取各种屏幕的高度宽度老是要记混，现在就在这里稍稍总结一下：

忘是亡心i/ 2022年06月17日 13:50/ 0 赞/ 234 阅读

相关 JS和jquery获取各种屏幕的宽度和高度的代码

Javascript: 　　网页可见区域宽： document.body.clientWidth 　　网页可见区域高： document.body.clientHeig

迈不过友情╰/ 2022年06月08日 10:28/ 0 赞/ 230 阅读

相关 react-native获取组件的位置高度宽

measure函数可以获取当前的位置、宽、高信息； this.refs.name. measure( fn () ) fn(fx, fy, width,

迈不过友情╰/ 2022年06月02日 00:21/ 0 赞/ 485 阅读

相关 js中动态获取页面的高度和宽度的方法总结

javascript,jquery获取网页的高度和宽度： javascript: 可视区域宽：document.documentElement.clientWidth(wi

旧城等待，/ 2022年05月09日 16:44/ 0 赞/ 210 阅读

相关 JS/JQ获取各种屏幕的高度和宽度

Javascript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight

冷不防/ 2022年04月22日 08:46/ 0 赞/ 225 阅读

相关 js和jq获取浏览器的各种高度宽度

js: 网页可见区域宽[仅针对body]： document.body.clientWidth 网页可见区域高[仅针对body]： document.b

Dear 丶/ 2022年04月15日 06:29/ 0 赞/ 433 阅读

相关 JS获取屏幕的宽度和高度

<html> <script> 　　function a(){ 　　　　document.write( 　　　　"屏幕分辨率为："+sc

不念不忘少年蓝@/ 2021年09月30日 10:22/ 0 赞/ 500 阅读

相关 JS/JQ获取各种屏幕的高度和宽度

> 参考文档:[www.cnblogs.com/zhishiqu/p/…][www.cnblogs.com_zhishiqu_p] [www.cnblogs.com_zhi

ゝ一纸荒年。/ 2021年09月18日 08:56/ 0 赞/ 442 阅读