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

or0fun 发布于2019-08-21 11:35 / 1414人阅读

摘要：用和获取相关属性网页可见区域宽网页可见区域高网页可见区域宽包括边框的宽网页可见区域高包括边框的高网页正文全文宽网页正文全文高网页下滑的距离网页左滑的距离屏幕分辨率的高屏幕分辨率的宽屏幕可用工作区的高屏幕可用工作区的高浏览器可视区域的内宽度，

用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的子节点,即标签，而documentElement是整个节点树的根结点，即标签。
即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; 
}

GPU云服务器云服务器 js获取屏幕高度屏幕高度宽度 js 获取控件的宽度 js 屏幕高度渐变

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86880.html

Web移动开发基本概念

摘要：移动客户端的开发类型原生，也就是完全使用移动设备系统语言写的客户端，就是纯，安卓就是纯就是用户看到的界面体验到的交互都是原生的。前端是个很大的概念，我的理解是用户能够看到，直接接触到的层面都算是前端，比如IOS客户端界面，安卓客户端界面，网页界面，甚至PC/MAC 桌面端软件界面；现在最常见的说法一般是指Web前端，也就是针对于网页端开发的工作。 Web App就是以浏览器作为客户端...

vvpale 2019-08-19 17:36 评论0 收藏0
Web移动开发基本概念

摘要：移动客户端的开发类型原生，也就是完全使用移动设备系统语言写的客户端，就是纯，安卓就是纯就是用户看到的界面体验到的交互都是原生的。前端是个很大的概念，我的理解是用户能够看到，直接接触到的层面都算是前端，比如IOS客户端界面，安卓客户端界面，网页界面，甚至PC/MAC 桌面端软件界面；现在最常见的说法一般是指Web前端，也就是针对于网页端开发的工作。 Web App就是以浏览器作为客户端...

ivan_qhz 2019-08-30 12:45 评论0 收藏0
Web移动开发基本概念

摘要：移动客户端的开发类型原生，也就是完全使用移动设备系统语言写的客户端，就是纯，安卓就是纯就是用户看到的界面体验到的交互都是原生的。前端是个很大的概念，我的理解是用户能够看到，直接接触到的层面都算是前端，比如IOS客户端界面，安卓客户端界面，网页界面，甚至PC/MAC 桌面端软件界面；现在最常见的说法一般是指Web前端，也就是针对于网页端开发的工作。 Web App就是以浏览器作为客户端...

xiaoqibTn 2019-08-01 15:04 评论0 收藏0
移动端适配

摘要：在端，的一般对应着电脑屏幕的个物理像素，但在移动端，的等于几个物理像素是和屏幕像素密度有关的。也被称为视网膜显示屏。设备像素比设备像素比简称为，物理像素与设备独立像素的比例。在说具体内容之前，我们必须了解几个概念，就是：Retina屏、物理像素、设备独立像素、设备像素比在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个...

plokmju88 2019-08-02 16:16 评论0 收藏0
移动端适配

摘要：在端，的一般对应着电脑屏幕的个物理像素，但在移动端，的等于几个物理像素是和屏幕像素密度有关的。也被称为视网膜显示屏。设备像素比设备像素比简称为，物理像素与设备独立像素的比例。在说具体内容之前，我们必须了解几个概念，就是：Retina屏、物理像素、设备独立像素、设备像素比在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个...

Maxiye 2019-08-26 18:27 评论0 收藏0