JS、jQuery各种宽高属性

JS下各种宽高


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

  • Window对象表示浏览器中打开的窗口,window对象可以省略,比如window.alert()可以简写为alert()
  • Document对象Window对象的一部分,那么window.document.body我们可以写成document.body,浏览器的HTML文档成为Document对象

Window下的宽高属性:

1
2
3
4
5
6
7
8
9
10
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、innerHeightouterWidth、outerHeight是不支持IE9以下版本的,而screen系列宽高则不存在兼容问题
参考图如下:


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

  • client相关的宽高
  • offset相关的宽高
  • scroll相关的宽高

client相关的宽高:

1
2
3
4
document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.clientTop

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

  • 如果没有滚动条,即为元素设定的高度和宽度
  • 如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高

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

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

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

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

offset相关宽高介绍:

1
2
3
4
document.body.offsetWidth
document.body.offsetHeight
document.offsetLeft
document.offsetTop

offsetWidthoffsetHeight这一对属性指的是元素的border+padding+content的宽度和高度
该属性和其内部的内容是否超出元素大小无关,只和本来设定的border以及paddingcontent有关
offsetLeftoffsetTop这两个属性是基于offsetParent的,了解这两个属性我们必须先了解什么是offsetParent
如果当前元素的父级元素没有进行CSS定位(positionabsoluterelative),offsetParentborder.
假如当前元素的父级元素中有CSS定位,offsetParent取最近的那个父级元素。

  • IE6/7中:offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left)
  • IE8/9/10Chrome中:offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParent的padding-left)+(当前元素的margin-left)
  • FireFox中:offsetLeft=(offsetParent的margin-left)+(offsetParent的padding-left)+(当前元素的margin-left)

scroll相关宽高介绍:

1
2
3
4
document.body.scrollWidth
document.body.scrollHeight
document.body.scrollLeft
document.body.scrollTop

scrollWidthscrollHeight:

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

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

Event对象的5种坐标

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

JQuery下各种宽高


1
2
3
4
5
6
7
8
9
10
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宽高的理解和应用

如果您觉得我的文章对您有用,请随意打赏。

您的支持将鼓励我继续创作!

¥ 打赏支持

文章导航

目录

×
  1. 1. JS下各种宽高
  2. 2. Event对象的5种坐标
  3. 3. JQuery下各种宽高