js获取网页各种宽高

最新推荐文章于 2024-03-12 22:27:40 发布

Inuyasha1121

最新推荐文章于 2024-03-12 22:27:40 发布

阅读量4.8k

点赞数 5

分类专栏： javascript 页面宽高文章标签： javascript function

javascript 同时被 2 个专栏收录

74 篇文章 1 订阅

订阅专栏

页面宽高

3 篇文章 0 订阅

订阅专栏

网页可见区域宽：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展示：

 
document.getElementsByClassName("js-new-issue-button")[0].style.width
 
// "84px"
 
document.getElementsByClassName("js-new-issue-button")[0].clientWidth
 
// 104
 
$(".w_content .product_piece img").css("width");
 
// "165px"
 
$(".w_content .product_piece img").width();
 
// 165

//获取元素的纵坐标

 
function getTop(e){
 
    var offset=e.offsetTop;
 
    if(e.offsetParent!=null) 
 
        offset+=getTop(e.offsetParent);
 
    return offset;
 
}

//获取元素的横坐标

 
function getLeft(e){
 
    var offset=e.offsetLeft;
 
    if(e.offsetParent!=null) 
 
        offset+=getLeft(e.offsetParent);
 
    return offset;
 
}

获取高度时在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

Inuyasha1121

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js获取网页各种宽高

function getInfo（） { var s = ""; s += " 网页可见区域宽："+ document.body.clientWidth; s += " 网页可见区域高："+ document.body.clientHeight; s += " 网页可见区域宽："+ document.body.offsetWidth + " （包含边线和迁移转变条的宽）";
复制链接

扫一扫