JS、jQuery各种宽高属性

CntChen 发布于2019-08-22 10:46 / 1669人阅读

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

JS下各种宽高

Window和Document:
JS下宽高分为挂载在Window对象和Document对象下的宽高属性，先说下Window和Document的区别:

Window对象表示浏览器中打开的窗口，window对象可以省略，比如window.alert()可以简写为alert()

Document对象是Window对象的一部分，那么window.document.body我们可以写成document.body，浏览器的HTML文档成为Document对象

Window下的宽高属性:

window.innerWidth:浏览器窗口内部宽度
window.innerHeight:浏览器窗口内部高度
window.outerWidth:浏览器窗口外部宽度
window.outerHeight:浏览器窗口外部高度
window.screen.width:屏幕宽度
window.screen.height:屏幕高度
window.screen.availWidth:屏幕的可使用宽度
window.screen.availHeight:屏幕的可使用高度
window.screenTop:浏览器窗口距屏幕顶部的距离
window.screenLeft:浏览器窗口距屏幕左侧的距离

注:innerWidth、innerHeight和outerWidth、outerHeight是不支持IE9以下版本的，而screen系列宽高则不存在兼容问题
参考图如下:

Document下的宽高属性:
Docment下有三类属性:

与client相关的宽高

与offset相关的宽高

与scroll相关的宽高

与client相关的宽高:

document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.clientTop

clientWidth和clientHeight该属性指的是元素的可视部分宽度和高度，即padding+content

如果没有滚动条，即为元素设定的高度和宽度

如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高

clientLeft和clientTop这两个返回的是元素周围边框的厚度，如果不指定一个边框或者不定位该元素，它的值就是0

clientTop = border-top.border-width
clientLeft = border-left.border-width

获取浏览器窗口可视区域大小在不同浏览器都实用的JS方案:

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

与offset相关宽高介绍:

document.body.offsetWidth
document.body.offsetHeight
document.offsetLeft
document.offsetTop

offsetWidth与offsetHeight这一对属性指的是元素的border+padding+content的宽度和高度
该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及padding和content有关
offsetLeft和offsetTop这两个属性是基于offsetParent的，了解这两个属性我们必须先了解什么是offsetParent
如果当前元素的父级元素没有进行CSS定位（position为absolute或relative）,offsetParent为border.
假如当前元素的父级元素中有CSS定位，offsetParent取最近的那个父级元素。

在IE6/7中：offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left)

在IE8/9/10及Chrome中：offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParent的padding-left)+(当前元素的margin-left)

在FireFox中：offsetLeft=(offsetParent的margin-left)+(offsetParent的padding-left)+(当前元素的margin-left)

与scroll相关宽高介绍:

document.body.scrollWidth
document.body.scrollHeight
document.body.scrollLeft
document.body.scrollTop

scrollWidth和scrollHeight:

给定宽高小于浏览器窗口:
scrollWidth:浏览器窗口的宽度

scrollHeight:浏览器窗口的高度

给定宽高大于浏览器窗口，且内容小于给定宽高:
scrollWidth:给定的宽度+其所有padding、margin、border

scrollHeight:给定的高度+其所有的padding、margin、border

给定宽高大于浏览器窗口，且内容大于给定宽高:
scrollWidth:内容宽度+其所有的padding、margin、border

scrollHeight:内容高度+其所有的padding、margin、border

scrollLeft和scrollTop这对属性是可读写的，指的是当元素其中的内容超出其宽高的时候，元素被卷起来的宽度和高度

Event对象的5种坐标

clientX和clientY，相对于浏览器（可视区左上角0,0）的坐标
screenX和screenY，相对于设备屏幕左上角（0,0）的坐标
offsetX和offsetY，相对于事件源左上角（0,0）的坐标
pageX和pageY，相对于整个网页左上角（0,0）的坐标
X和Y，本来是IE属性，相对于用CSS动态定位的最内层包容元素

JQuery下各种宽高

width():元素的content区域宽度
height():元素的content区域高度
innerWidth():元素的content+padding区域宽度
innerHeight():元素的content+padding区域高度
outerWidth(Boolean):可选，默认表示元素的content+padding+border区域的宽度，如果为true表示元素的content+padding+border+margin区域的宽度
outerHeight(Boolean):可选，默认表示元素的content+padding+border区域的高度，如果为true表示元素的content+padding+border+margin区域的高度
scrollLeft():相对于水平滚动条左边的距离
scrollTop():相对于垂直滚动条上边的距离
offset():返回相对于document的当前坐标值，包含left、top值
position():返回相对于offsetParent的当前坐标值，包含left、top值

本文整理自慕课网课程《JS/jQuery宽高的理解和应用》

混合云专线服务 js获取图宽高 jquery修改属性值 js获取移动设备宽高 jquery设置disabled属性

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

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

JavaScript中的各种宽高属性

摘要：在中，存在着多的关于高度和宽度的属性，比如等等这么多，傻傻分不清也正常啊。第二问题对象的属性引用的是对象，表示该窗口中当前显示文档的。如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。在js中，存在着N多的关于高度和宽度的属性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

wangbinke 2019-08-20 12:21 评论0 收藏0
总结：前端开发中让元素水平垂直居中的方法

摘要：如果要居中的块级元素直接是内联元素等，直接在其父级元素上加上属性即可图片之间，浏览器会产生默认的间距，父元素设置可以很好地解决这个问题。使用水平居中前提居中的元素必须是块级元素，如果是内联元素，需要添加属性而且元素不浮动。前端开发中，我们经常需要对元素进行水平垂直居中。为此，小编特地总结了让元素居中的方法。 showImg(https://segmentfault.com/img/b...

fnngj 2019-08-02 12:02 评论0 收藏0
总结：前端开发中让元素水平垂直居中的方法

摘要：如果要居中的块级元素直接是内联元素等，直接在其父级元素上加上属性即可图片之间，浏览器会产生默认的间距，父元素设置可以很好地解决这个问题。使用水平居中前提居中的元素必须是块级元素，如果是内联元素，需要添加属性而且元素不浮动。前端开发中，我们经常需要对元素进行水平垂直居中。为此，小编特地总结了让元素居中的方法。 showImg(https://segmentfault.com/img/b...

douzifly 2019-08-29 17:17 评论0 收藏0
获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别

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

woshicixide 2019-08-21 12:02 评论0 收藏0
js监听div元素的宽高变化

摘要：构造函数，参数为回调函数构造函数为，它在监听到中的改变并且一系列改变结束后触发回调函数。是要监听的元素，为监听选项对象，可选的选项如下所以监听元素宽高变化，就是监听属性变化这样当元素发生变化时，就会触发构造函数中的函数。一、js监听window变化的方法 1、onsize只能监听window对象的变化 (1)、 window对象原生、jQuery方法 //原生写法 window.on...

lansheng228 2019-08-23 18:21 评论0 收藏0