JS/jQuery宽高的理解和应用

JS下各种宽高

window和document对象的关系

  • Window对象表示浏览器中打开的窗口(window对象可省略)
  • Document对象是Window对象的部分。浏览器的HTML文档成为Document对象

window对象相关宽高

属性 描述
window.innerWidth 浏览器窗口内部宽度(包括导航栏)
window.innerHeight 浏览器窗口内部高度(包括导航栏)
window.outerWidth 浏览器窗口外部宽度
window.outerHeight 浏览器窗口外部高度

最外层的是window.outerWidth和window.outerHeight。window.innerWidth,window.innerHeight,window.outerWidth,window.outerHeight在IE下存在兼容性问题。

属性 描述
window.screen.height 屏幕宽度
window.screen.width 屏幕高度
window.screen.availHeight 屏幕的可使用宽度
window.screen.availWidth 屏幕的可使用高度
window.screenTop 浏览器窗口距屏幕顶部的距离
window.screenLeft 浏览器窗口距屏幕左侧的距离

最外层的是window.screen.height和window.screen.width

document对象相关宽高

与client相关的宽高

属性 描述
document.body.clientWidth padding-box的宽度减去滑动条的宽度
document.body.clientHeight padding-box的高度减去滑动条的高度
document.body.clientLeft 等于border-top-width
document.body.clientTop 等于border-left-width
  • mac的滑动条不占宽度,而Windows的滑动条占宽度(因此两者的计算值不同)

与offset相关的宽高

属性 描述
document.body.offsetWidth border-box的宽度
document.body.offsetHeight border-box的高度
document.offsetLeft 不同浏览器的实现不同
document.offsetTop 不同浏览器的实现不同

与scroll相关的宽高

属性 描述
document.body.scrollWidth 不同浏览器的实现不同
document.body.scrollHeight 不同浏览器的实现不同
document.body.scrollLeft 元素被卷起的宽度(可读写)
document.body.scrollTop 元素被卷起的高度(可读写)
  • 在普通元素下面的scrollWidth和scrollHeight,各浏览器的实现一致。有滚动条的时候等于内容宽度(内容高度)加上padding 无滚动条的时候等于clientWidth(clientHeight)

documentElement和body的关系

  • documentElement对象指的是HTML
  • body对象指的是body(父子关系)
属性 描述
document.documentElement.clientWidth 可视区域宽度(不包含滑动条)
document.documentElement.clientHeight 可视区域高度(不包含滑动条)

event对象相关宽高

属性 描述
clientX和clientY 相对于浏览器(可视区左上角0,0)的坐标
screenX和screenY 相对于设备屏幕左上角(0,0)的坐标
offsetX和offsetY 相对于事件源左上角(0,0)的坐标
pageX和pageY 相对于整个网页左上角(0,0)的坐标
X和Y 本来是IE属性,相对于用CSS动态定位的最内层包容元素
  • 在IE里面event.X的值根据他是否为定位元素,会有差异。其他浏览器则都等于clientX。

jQuery下各种宽高

宽高

属性 描述
.width() content-box的宽度
.height() content-box的高度
.innerWidth() padding-box的宽度
.innerHeight() padding-box的高度
.outerWidth() border-box的宽度
.outerHeight() border-box的高度
.outerWidth(true) border-box加上margin的宽度
.outerHeight(true) border-box加上margin的高度
  • jQuery尺寸对应的方法返回值的单位都是px,若想根据box-sizing获得width和height,请使用.css( “height” )和.css( “width” )。
  • jQuery不支持获取隐藏元素的 border, margin, 或 padding 信息。

位置

方法 描述
.offset() 在匹配的元素集合中,获取的第一个元素的当前坐标,或设置每一个元素的坐标,坐标相对于文档。
.offsetParent() 取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是,CSS 的 position 属性是 relative, absolute, 或 fixed 的元素。
.position() 获取匹配元素中第一个元素的当前坐标,相对于offset parent的坐标
.scrollLeft() 获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条位置
.scrollTop() 获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置
  • jQuery不支持获取隐藏元素的偏移坐标及所占用的边框,边距和填充的大小
  • .offset()方法允许我们重新设置元素的位置(通过设置top和left),这个元素的位置是相对于document对象的。如果对象原先的.position()样式属性是static的话,会被改成relative来实现重定位。
  • .scrollLeft(), 当直接调用或使用.animate()做动画,当元素被应用了隐藏,将不做任何改变

补充

  • Element.getBoundingClientRect()

    Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

  • Window.getComputedStyle()

    Window.getComputedStyle() 方法会在一个元素应用完有效样式且计算完所有属性的基本值之后给出所有 CSS 属性的值。