javascript 常用获取页面宽高信息 API

在页面的构建中 常常会需要获取页面的一些宽高信息,例如实现 惰性加载图片 需要获取页面的可见区域高度 和 已滚动区域的高度,以判断图片所在位置是否可见来决定加载图片的时间,

花点时间整理了一下,获取页面宽高信息的API

持续整理中...

在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.clientWidth

网页可见区域高:
document.body.clientHeight

网页可见区域宽:
document.body.offsetWidth(包括边线的宽)

网页可见区域高:
document.body.offsetHeight(包括边线的宽)

网页正文全文宽:
document.body.scrollWidth

网页正文全文高:
document.body.scrollHeight

网页被卷去的高:
document.body.scrollTop

window.pageYOffset

网页被卷去的左:
document.body.scrollLeft

window.pageXOffset

网页正文部分上:
window.screenTop

网页正文部分左:
window.screenLeft

屏幕分辨率的高:
window.screen.height

屏幕分辨率的宽:
window.screen.width

屏幕可用工作区高度:
window.screen.availHeight

屏幕可用工作区宽度:
window.screen.availWidth

时间: 2024-09-27 17:42:51

javascript 常用获取页面宽高信息 API的相关文章

获取页面宽高相关数值

在jquery中 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 :$(window).width(); 获取页面的文档高度 :$(document).height(); 获取页面的文档宽度 :$(document).width(); 获取滚动条到顶部的垂直高度 :$(document).scrollTop(); 获取滚动条到左边的垂直宽度 :$(document).scrollLeft(); 使用javascript 网页可见区域宽: docum

jQuery 获取页面宽高

无滚动条的情况下(页面宽高比可视区域小):$(document)和$(window)的width.height方法获取的值都是一样的,都是可视区域的宽高即$(document).width()==$(window).width() $(document).height()==$(window).height() 有垂直滚动条的情况下(页面高度比可视区域高):比如,可视区域高度638px,而页面实际高度为900或更多,超出可视区域高度,会出现垂直滚动条那么$(document)和$(window)

jq弹窗(获取页面宽高,滚轮高度,始终居中)

jq写一个弹窗,效果如上图所示, 点击按钮弹窗弹出,右上角关闭. 弹窗始终显示在页面中间,无论放大缩小窗口,滚轮滚动. 代码如下: html: <br><br><br><br> <button>弹出</button> <div id="tanchuang"> <span id="close">×</span> </div> <br>&l

Javascript之获取屏幕宽高

<head> <title> new document </title> <meta name="generator" content="editplus" charset="utf-8"/> </head> <script language="javascript"> document.write("screen.availHeight:&qu

JS 获取浏览器和屏幕宽高信息(转载)

JS 获取浏览器和屏幕宽高信息 网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线的宽)网页可见区域高:document.body.offsetHeight (包括边线的宽)网页正文全文宽:document.body.scrollWidth网页正文全文高:document.body.scrollHeight网页被卷去的高:documen

JavaScript中的各种宽高以及位置总结

JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之间 实现方式不同,常常会造成概念混淆,经过研究之后,这里来进行一个总结. 第一部分:DOM对象 1.1只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如

android中加载的html获取的宽高不正确

wap页面使用 js库是zepto,按照惯例在$(function(){})中,来获取当前可视区的宽高,但得到的宽高却与预想的相差十万八千里. 原本android手机的浏览器设定的宽高基本是360*640,原生的浏览器打印没问题,uc没问题,qq没问题. 结果app出问题... ios的各浏览器app都没问题.就android有这种问题,而且是诡异,以为是app没有调宽高... 为了获取高度原来是为了设定轮播图的高度的. 经过调试发现,在图片加载完后再获取宽高就标准了. 所以android ap

各种情况上JS获取元素宽高

各种情况下JS获取元素宽高 为了叙述简单,这里仅拿width示例. 情景一,元素style属性设置了width/height <div style="width:996px">test<div><script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width);</script>默认分类 如上,使用el.style.width即可. 如果没有

【整理】原生js和jQ获取窗口宽高及滚动条的方法和函数

原生js和jQ获取窗口宽高及滚动条的方法和函数 一.原生js获取 1.实际宽高(不包括工具栏,滚动条的视口高度,ie6.7.8不支持) window.innerHeight window.innerWidth 2.显示屏宽高 screen.height screen.width 3..显示屏宽高(除windows任务栏之外的高度)屏幕可用工作区 screen.avaiHeight screen.availWidth 4.网页可见区域宽高 document.body.clientWidth doc