获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别

woshicixide 发布于2019-08-21 12:02 / 2442人阅读

摘要：基本介绍与与获得的是屏幕可视区域的宽高，不包括滚动条与工具条。纵向滚动条宽度横向滚动条高度与与获得的是加上工具条与滚动条窗口的宽度与高度。兼容性和属性与和属性以及以下不支持。

基本介绍 $(window).width()与$(window).height()

$(window).width()与$(window).height()：获得的是屏幕可视区域的宽高，不包括滚动条与工具条。

$(window).width() = width + padding
$(window).height() = height + padding

document.documentElement.clientWidth与document.documentElement.clientHeight

document.documentElement.clientWidth与document.documentElement.clientHeight：获得的是屏幕可视区域的宽高，不包括滚动条与工具条，跟jquery的(window).width()与(window).height()获得的结果是一样的。

document.documentElement.clientWidth = width + padding
document.documentElement.clientHeight = height + padding

window.innerWidth与window.innerHeight

window.innerWidth与window.innerHeight：获得的是可视区域的宽高，但是window.innerWidth宽度包含了纵向滚动条的宽度，window.innerHeight高度包含了横向滚动条的高度(IE8以及低版本浏览器不支持)。

window.innerWidth = width + padding + border + 纵向滚动条宽度
window.innerHeight = height + padding + border + 横向滚动条高度

window.outerWidth与window.outerHeight

window.outerWidth与window.outerHeight：获得的是加上工具条与滚动条窗口的宽度与高度。

window.outerWidth = width + padding + border + 纵向滚动条宽度
window.outerHeight = height + padding + border + 横向滚动条高度 + 工具条高度

document.body.clientWidth与document.body.clientHeight

document.body.clientWidth与document.body.clientHeight：document.body.clientWidth获得的也是可视区域的宽度，但是document.body.clientHeight获得的是body内容的高度，如果内容只有200px，那么这个高度也是200px,如果想通过它得到屏幕可视区域的宽高，需要样式设置，如下：

body {
height: 100%;
overflow: hidden;
}
body, div, p, ul {
margin: 0;
padding: 0;
}

最关键的是：body的height:100%影响document.body.clientHeight的值。
body的margin:0,padding:0影响document.body.clientWidth的值。

offsetWidth & offsetHeight

返回本身的宽高 + padding + border + 滚动条

offsetLeft & offsetTop

所有HTML元素拥有offsetLeft和offsetTop属性来返回元素的X和Y坐标

1.相对于已定位元素的后代元素和一些其他元素（表格单元），这些属性返回的坐标是相对于祖先元素
2.一般元素，则是相对于文档，返回的是文档坐标

offsetParent属性指定这些属性所相对的父元素，如果offsetParent为null，则这些属性都是文档坐标

//用offsetLeft和offsetTop来计算e的位置
function getElementPosition(e){
    var x = 0,y = 0;
    while(e != null) {
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent;
    }
    return {
        x : x,
        y : y
    };
}

scrollWidth & scrollHeight

这两个属性是元素的内容区域加上内边距，在加上任何溢出内容的尺寸.

因此，如果没有溢出时，这些属性与clientWidth和clientHeight是相等的。

scrollLeft & scrollTop

指定的是元素的滚动条的位置

scrollLeft和scrollTop都是可写的属性，通过设置它们来让元素中的内容滚动。

兼容性

1.window innerWidth 和 innerHeight 属性与outerWidth和outerHeight属性IE8以及以下不支持。

2.测试浏览器IE，火狐，谷歌，360浏览器，Safari都支持document.documentElement.clientWidth与document.documentElement.clientHeight。

结论

获取屏幕的可视区域的宽高可使用jquery的方式获得，也可以使用原生js获得，即：

document.documentElement.clientWidth与document.documentElement.clientHeight

云服务器 GPU云服务器 asp获取屏幕的宽高屏幕宽高 js获取图宽高 js获取移动设备宽高

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

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

JavaScript获取浏览器、元素、屏幕的宽高尺寸

摘要：一浏览器视口的宽高浏览器视口宽度单位像素，如果存在滚动条则包括它。二浏览器的宽高整个浏览器窗口的高度单位像素，包括侧边栏如果存在窗口镶边和窗口调正边框。语法示例六屏幕的宽高屏幕分辨率宽高。 showImg(https://segmentfault.com/img/remote/1460000014929763); 版权声明转载请告知并注明来源作者作者：唐金健网络昵称：御焱 ...

Amio 2019-08-22 17:22 评论0 收藏0
JS、jQuery各种宽高属性

摘要：下各种宽高和下宽高分为挂载在对象和对象下的宽高属性，先说下和的区别对象表示浏览器中打开的窗口，对象可以省略，比如可以简写为对象是对象的一部分，那么我们可以写成，浏览器的文档成为对象下的宽高属性浏览器窗口内部宽度浏览器窗口内部高度浏览器窗口外 JS下各种宽高 Window和Document:JS下宽高分为挂载在Window对象和Document对象下的宽高属性，先说下Window和Do...

CntChen 2019-08-22 10:46 评论0 收藏0
JS动态解析浏览器和网页的各种宽高属性

摘要：获得各种宽高的属性还有公式网页可见区域高滚动条宽度测试的文字网页可见区域宽滚动条宽度测试的文字的总高度滚动条宽度边框宽度测试的文字的总宽度滚动条宽度边框宽度测试的文字的解释元素内容高度的度量，包括由于溢出导致的视图中不可见内容滚动总高度获得各种宽高的属性还有公式 body { padding: 50px; height: 500px; ...

Luosunce 2019-08-02 15:26 评论0 收藏0
JS动态解析浏览器和网页的各种宽高属性

摘要：获得各种宽高的属性还有公式网页可见区域高滚动条宽度测试的文字网页可见区域宽滚动条宽度测试的文字的总高度滚动条宽度边框宽度测试的文字的总宽度滚动条宽度边框宽度测试的文字的解释元素内容高度的度量，包括由于溢出导致的视图中不可见内容滚动总高度获得各种宽高的属性还有公式 body { padding: 50px; height: 500px; ...

XiNGRZ 2019-08-23 18:26 评论0 收藏0
JS动态解析浏览器和网页的各种宽高属性

摘要：获得各种宽高的属性还有公式网页可见区域高滚动条宽度测试的文字网页可见区域宽滚动条宽度测试的文字的总高度滚动条宽度边框宽度测试的文字的总宽度滚动条宽度边框宽度测试的文字的解释元素内容高度的度量，包括由于溢出导致的视图中不可见内容滚动总高度获得各种宽高的属性还有公式 body { padding: 50px; height: 500px; ...

galois 2019-08-30 11:19 评论0 收藏0