Xu•thus Blog

JS中各种宽高和位置

发表于 | 分类于 | 阅读次数

在获取窗口或元素的大小和位置信息的时候，经常会被这些属性弄懵，于是整理了一下这些方法或属性，方便查看

窗口的位置和大小

位置

  • screenLeft 和 screenX：用于表示窗口相对于屏幕左边的位置，大部分浏览器都支持前者，火狐只支持后者

  • screenTop 和 screenY ： 用于表示窗口相对于屏幕上边的位置，大部分浏览器都支持前者，火狐只支持后者

    兼容

    1
    2
    const leftPos = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX
    const topPos = (typeof window.screenTop === 'number') ? window.screenTop : window.screenY

大小

  • innerWidth 窗口宽度
  • innerHeight 窗口高度

这两个属性主流浏览器都支持，IE9+也支持，IE8需要通过DOM来获取，即document.documentElement.clientWidth和document.documentElement.clientHeight

元素的大小

偏移量

  • offsetHeight 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框和下边框高度
  • offsetWidth 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂直滚动条宽度、左边框和右边框的宽度
  • offsetLeft 元素的左边框至包含元素的左内边框之间的像素距离
  • offsetTop 元素的上边框至包含元素的上内边框之间的像素距离

其中offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。offsetParent不一定和parentNode的值相等

比如<td>元素的offetParent是作为祖先元素的<table>元素，因为<table>是在DOM层次中距<td>最近的一个具有大小的元素

01.png

要想准确知道元素在页面的偏移量，需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，如此循环直至根元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function getElementLeft (element) {
    var actualLeft = element.offsetLeft
    var current = element.offsetParent
    while (current !== null) {
        actualLeft += current.offsetLeft
        current = current.offsetParent
    }
    return actualLeft
}
function getElementTop (element) {
    var actualTop = element.offsetTop
    var current = element.offsetParent
    while (current !== null) {
        actualTop += current.offsetTop
        current = current.offsetParent
    }
    return actualTop
}

客户区大小

客户区大小指的是元素内容及内边距所占据的空间大小

  • clientWidth 元素内容区宽度加上左右内边距宽度
  • clientHeight 元素内容区高度加上上下内边距高度
02.png

滚动大小

  • scrollHeight 在没有滚动条的情况下，元素内容的总高度
  • scrollWidth 在没有滚动条的情况下，元素内容的总宽度
  • scrollLeft 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置

  • scrollTop 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置

    scrollHeight和scrollWidth主要同于确定元素内容的实际大小。因此带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight

    03.png

确定元素大小

主要就是调用getBoundingClientRect()方法，这个方法返回一个矩形对象，包含六个属性，除了left、top、right和bottom，还包含自身的width和height

事件event对象相关坐标位置

客户区坐标位置

  • clientX 表示事件发生事鼠标指针在视口中的水平坐标
  • clientY 表示事件发生事鼠标指针在视口中的垂直坐标

页面坐标位置

  • pageX 表示鼠标光标在页面中的水平位置
  • pageY 表示鼠标光标在页面中的垂直位置

在没有滚动条的时候，pageX和pageY的值与clientX和clientY的值相同，IE8及之前的版本不支持这两个属性

屏幕坐标位置

  • screenX 表示事件发生时鼠标指针在整个屏幕的水平位置
  • screenY 表示事件发生时鼠标指针在整个屏幕的垂直位置