关于JS、JQ获取可视区域的高度、宽度以及屏幕分辨率的那些事

用JS和JQ获取相关属性

JavaScript

document.body.clientWidth;//网页可见区域宽
document.body.clientHeight;//网页可见区域高
document.body.offsetWidth;//网页可见区域宽(包括边框的宽)
document.body.offsetHeight;//网页可见区域高(包括边框的高)
document.body.scrollWidth;//网页正文全文宽
document.body.scrollHeight;//网页正文全文高 document.body.scrollTop;//网页下滑的距离
document.body.scrollLeft;//网页左滑的距离 window.screen.height;//屏幕分辨率的高
window.screen.width;//屏幕分辨率的宽 window.screen.availHeight;//屏幕可用工作区的高
window.screen.availWidth;//屏幕可用工作区的高
window.innerWidth;//浏览器可视区域的内宽度,不包含浏览器边框,但包含滚动条
window.innerHeight;//浏览器可视区域的内高度

jQuery

鉴于大家很多使用jquery, 因此这里顺便把jQuery的相应方法附上

$(window).height();//浏览器当前窗口可视区域高度
$(document).height();//浏览器当前文档的的高度
$(document.body).height();//浏览器当前窗口文档body的高度
$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度(包括border、padding、margin)

浏览器的一些相关属性详解:

scrollHeight:获取对象的滚动高度 scrollWidth:获取对象的滚动宽度
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 offsetHeight:
获取对象相对于于版面或由父坐标offsetparent属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由offsetparent属性指定的父坐标的计算左侧的位置
offsetTop:获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置 event.clientX:相对于文档的水平坐标
event.clientY:相对于文档的垂直坐标 event.offsetX:相对容器的水平坐标
event.offsetY:相对容器的垂直坐标

浏览器相关属性表现:

  • CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关

  • offsetTop返回的是数字,而style.top返回的是字符串,带有单位

  • offsetTop只读,而style.top可读可写

  • 如果没有给相应html元素指定top的样式,则style.top返回的空字符串

  • 给top赋值时要带上单位px,否则无效

  • IE6.0、FF1.06+:
    clientWidth = width + padding
    clientHeight = height + padding
    offsetWidth = width + padding + border
    offsetHeight = height+ padding + border
    IE5.0/5.5:
    clientWidth = width - border
    clientHeight = height - border
    offsetWidth = width
    offsetHeight = height

相关实例

1、要获取当前页面的滚动条的纵坐标的位置,应该用:

document.documentElement.scrollTop

之所以不用document.body.scrollTop的原因是documentElement对应的是html标签,而body对应的是body标签

2、关于document.body和document.documentElement的区别

body是DOM对象中body的子节点,即<body>标签,而documentElement是整个节点树的根结点,即<html>标签。
即document.body.clientHeight获取到的是body的高度,而document.documentElement.clientHeight获取到的是 整个html的高度,然而当文档处于怪癖模式下时,我们使用document.documentElement.scrollTop获取到属性的值是为0的,而在w3c标准文档模式下,document.body.scrollTop的值是为0的,因此为了好的兼容性,我们可以这样写:

var top = document.documentElement.scrollHeight || document.body.scrollHeight

3、当想定位鼠标相对于页面的绝对位置时,我们一般会使用如下代码

event.clientX+document.body.scrollLeft

这时我们应该注意,可能会有鼠标定位偏离你的预想的情况发生,这是因为ie5.5之后已经不支持document.body.scrollX对象了,因此为了好的兼容系那个我们应该做以下判断。

if (document.body && document.body.scrollTop && document.body.scrollLeft) 
{ 
    top=document.body.scrollTop; 
    left=document.body.scrollleft;     
} 
if (document .documentElement && document .documentElement.scrollTop && document .documentElement.scrollLeft) 
{ 
    top=document.documentElement.scrollTop; 
    left=document.documentElement.scrollLeft; 
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值