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

2024年5月14日 125次阅读 来源: 胡洋

用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; 
}
    原文作者：胡洋
    原文地址: https://segmentfault.com/a/1190000008645596
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞