js获取网页各种宽高-阿里云开发者社区

开发者社区> 小新的蜡笔> 正文

js获取网页各种宽高

简介:  网页可见区域宽:document.body.clientWidth;                              $(window).
+关注继续查看

 网页可见区域宽:document.body.clientWidth; 

                            $(window).width() ; 
 网页可见区域高:document.body.clientHeight; 

                            $(window).height() ;
 网页可见区域宽: document.body.offsetWidth + " (包含边线和迁移转变条的宽)"; 
 网页可见区域高: document.body.offsetHeight + " (包含边线的宽)"; 
 网页正文全文宽: document.body.scrollWidth; 

                             $(document).width() ;

                             window.innerWidth ;
 网页正文全文高: document.body.scrollHeight; 

                             $(document).height() ;

                             window.innerHeight ;
 网页被卷去的高(ff) document.body.scrollTop; 

                                   $(window).scrollTop() ;
 网页被卷去的高(ie): document.documentElement.scrollTop; 
 网页被卷去的左: document.body.scrollLeft; 

                             $(window).scrollLeft() ;
 浏览器窗口相对于屏幕的上位置(除ff外的浏览器适用): window.screenTop; 
 浏览器窗口相对于屏幕的左位置(除ff外的浏览器适用): window.screenLeft; 

 浏览器窗口相对于屏幕的上位置(所有浏览器适用):window.screenY; 
 浏览器窗口相对于屏幕的左位置(所有浏览器适用): window.screenX; 
 屏幕辨别率的高: window.screen.height; 
 屏幕辨别率的宽: window.screen.width; 
 屏幕可用工作区高度: window.screen.availHeight; 
 屏幕可用工作区宽度: window.screen.availWidth; 
 你的屏幕设置是:  window.screen.colorDepth +" 位彩色"; 
 你的屏幕设置 : window.screen.deviceXDPI +" 像素/英寸"; 


本来是W3C的标准在作怪啊 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
文档类型如果定义了DTD的话 

document.body.clientWidth =》0

document.body.clientHeight =》0

可使用:

document.documentElement.clientWidth

document.documentElement.clientHeight

 代替获取可视宽高;

相反如果<!DOCTYPE>中没有定义DTD,则:

document.documentElement.clientWidth=》0

document.documentElement.clientHeight=》0

可使用:

document.body.clientWidth

document.body.clientHeight

 代替获取可视宽高;

为达到通用性可使用如下代码:

var clientWidth = document.documentElement.clientWidth || document.body.clientWidth || 0;

var clientHeight = document.documentElement.clientHeight || document.body.clientHeight || 0;




网页可见区域宽: document.body.clientWidth; 
网页可见区域高: document.body.clientHeight; 
网页可见区域宽: document.body.offsetWidth (包含边线和迁移转变条的宽); 
网页可见区域高: document.body.offsetHeight (包含边线的宽); 
网页正文全文宽: document.body.scrollWidth; 
网页正文全文高: document.body.scrollHeight; 
网页被卷去的高(ff):document.body.scrollTop; 
网页被卷去的高(ie): document.documentElement.scrollTop; 
网页被卷去的左:document.body.scrollLeft; 
网页正文项目组上:window.screenTop; 
网页正文项目组左:window.screenLeft; 
某个元素的宽度:obj.offsetWidth;
某个元素的高度:obj.offsetHeight;
某个元素的上鸿沟到body最顶部的间隔:obj.offsetTop;(在元素的包含元素不含迁移转变条的景象下)
某个元素的左鸿沟到body最左边的间隔:obj.offsetLeft;(在元素的包含元素不含迁移转变条的景象下)
返回当前元素的上鸿沟到它的包含元素的上鸿沟的偏移量:obj.offsetTop(在元素的包含元素含迁移转变条的景象下)
返回当前元素的左鸿沟到它的包含元素的左鸿沟的偏移量:obj.offsetLeft(在元素的包含元素含迁移转变条的景象下)
scrollTop, scrollLeft
设置或返回已经迁移转变到元素的左鸿沟或上鸿沟的像素数。只有在元素有迁移转变条的时辰,例如,元素的 CSS overflow 属性设置为 auto 的时辰,这些像素才有效。这些属性也只在文档的 <body> 或 <html> 标识表记标帜上定义(这和浏览器有关),并且一路来制订迁移转变文档的地位。重视,这些属性并不会指定一个 <iframe> 标识表记标帜的迁移转变量。这长短标准的但却获得很好支撑的属性

JS获取各种高度宽度:浏览器窗口滚动条的位置、元素的几何尺寸

1)关于 pageX, clienX,offsetX,layerX 

  • pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

  • clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

  • offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值 

  • layerX:FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点,也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就相等。

2)关于元素尺寸、位置和溢出的更多信息

  • 只读属性offsetWidth和offsetHeight:以css像素返回它的屏幕尺寸。返回尺寸包含元素的边框以内,出去外边距。

  • offsetLeft和offsetTop属性:返回元素的X和Y坐标。offsetParent属性指定这个属性相对的父元素。

  • ClientWidth和clientHeight:类似offsetWidth和offsetHeight,不同的是不包含边框大小,只包含内边距以内。如果浏览器在内边距和边框之间添加了滚动条,还不会包含滚动条。注意,<i>和<code>和<span>这类内联元素,clientWidth和clientHeight总是返回0;

  • clientLeft和clientTop属性:没什么用,返回内边距的外边缘和边框的外边缘之间水平距离和垂直距离。

  • scrollWidth和scrollHeight:内容+内边距+溢出。当无溢出时,和clientWidth和clientHeight相等。

  • scrollLeft和scrollTop是滚动条位置。

3)查询元素的几何尺寸 

  • 判断一个元素最简单的方法是调用它的getBoundingClientRect()方法。该方法在IE5中引入,而在现在所有浏览器中都实现了。返回一个有left  right top  bottom 等属性的对象。left top表示元素左上角的X和Y坐标,right bottom属性表示元素的右下角的X和Y坐标。

  •  

4)判断浏览器窗口滚动条的位置

  • 所有浏览器支持window.pageXOffset和window.pageYOffset. 除了IE8以下,所有支持scrollLeft和scrollTop;

  • document.compatMode // 有两种可能的返回值:BackCompat和CSS1Compat,对其解释如下: [BackCompat]Standards-compliant mode is not switched on. (Quirks Mode) [CSS1Compat] Standards-compliant mode is switched on. (Standards Mode)

5)设置鼠标滚动值

  • 方法一:scrollLeft和scrollTop属性可以用来设置浏览器滚动,如 document.body.scrollTop = 100;

  • 方法二:在jquery中,使用.scrollTop(value) 和 .scrollLeft() 来设置scrollTop的值。

相关DEMO展示:

1 document.getElementsByClassName("js-new-issue-button")[0].style.width
2 // "84px"
3 document.getElementsByClassName("js-new-issue-button")[0].clientWidth
4 // 104
5 $(".w_content .product_piece img").css("width");
6 // "165px"
7 $(".w_content .product_piece img").width();
8 // 165

 //获取元素的纵坐标

1 function getTop(e){
2     var offset=e.offsetTop;
3     if(e.offsetParent!=null) 
4         offset+=getTop(e.offsetParent);
5     return offset;
6 }

//获取元素的横坐标

1 function getLeft(e){
2     var offset=e.offsetLeft;
3     if(e.offsetParent!=null) 
4         offset+=getLeft(e.offsetParent);
5     return offset;
6 }

获取高度时在iPad中遇到问题:

要做自适应,并且随着屏幕颠来倒去改变菜单高度的效果,于是在ipad上遇到了纠结的问题:

屏幕工作区高度:window.screen.height(在ipad中,旋转屏幕时,该值不会发生变化)

屏幕工作区宽度:window.screen.width(在ipad中,旋转屏幕时,该值不会发生变化)

屏幕可用工作区高度:window.screen.availHeight (在ipad中,旋转屏幕时,该值不会发生变化)
屏幕可用工作区宽度:window.screen.availWidth(在ipad中,旋转屏幕时,该值不会发生变化)

$(window).height()   // 在ipad中获取的高度会与pc上预期的不一样,有一个( 屏幕工作区高度 - 屏幕可用工作区高度)的偏差
$(window).width()    // 在ipad中获取的宽度会与pc上预期的不一样,有一个( 屏幕工作区宽度 - 屏幕可用工作区宽度)的偏差

在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取:

document.body.offsetWidth
document.body.offsetHeight


在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小:

document.documentElement.clientWidth
document.documentElement.clientHeight


IE,FF,Safari皆支持该方法,opera虽支持该属性,但是返回的是页面尺寸;

同时,除了IE以外的所有浏览器都将此信息保存在window对象中,可以用以下获取:

window.innerWidth
window.innerHeight

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
计算机基础2 | 学习笔记
快速学习计算机基础2。
10 0
Vue 仿钉钉流程图(流程节点绘制 vue+Ant【如果用其他UI库需要替换几个组件】 附 demo)
# [这里是git地址](https://gitee.com/xiaoyaoluntian/imitating-dingding-flow-chart/tree/comdemo/)
6 0
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)
7 0
数据类型-数值和字符串 | 学习笔记
快速学习数据类型-数值和字符串。
5 0
【大数据组件】一篇文章让你快速入门Docker
Docker 是什么? Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源。 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。 容器是完全使用沙箱机制,相互之间不会有任何接口(类似 iPhone 的 app),更重要的是容器性能开销极低。 Docker 从 17.03 版本之后分为 CE(Community Edition: 社区版) 和 EE(Enterprise Edition: 企业版),我们用社区版就可以了。
15 0
作用域及作用域链 | 学习笔记
快速学习作用域及作用域链。
5 0
代码注释 | 学习笔记
快速学习代码注释。
9 0
求数组元素的和 | 学习笔记
快速学习求数组元素的和。
6 0
函数的返回值 | 学习笔记
快速学习函数的返回值。
6 0
函数当作参数2 | 学习笔记
快速学习函数当作参数2。
6 0
+关注
小新的蜡笔
专业从事地理信息系统(GIS)技术工作7~8年。具有丰富的GIS架构、地图展示方面的经验。喜欢探索以及与小伙伴们探讨、分享技术。
134
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载