By

文章目录
  1. 1. 滚动条滚动距离
  2. 2. 可视区域窗口尺寸
  3. 3. 查看元素的几何尺寸
  4. 4. 让滚动条滚动多少距离
  5. 5. 获取计算样式

滚动条滚动距离

1
2

window.pageXOffset/pageYOffset;  ie8及ie8以下不兼容

ie8及ie8以下使用

1
2
3
document.body.scrollLeft/Top

document.documentElement.scrollLeft/Top

由于兼容性混乱，一个能用 另一个一定是0 所以相加使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
document.body.scrollLeft+document.documentElement.scrollLeft

//返回滚动条滚动距离
function getScrollOffset() {
    if (window.pageXOffset) {
        //((return 大括号必须跟在后面  不能换行  否则返回undefined
        return {
            x: window.pageXOffset,
            y: window.pageYOffset
        }
    } else {
        return {
            x: document.body.scrollLeft + document.documentElement.scrollLeft,
            y: document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

可视区域窗口尺寸

即html文档可以看见的区域

ie8/ie8以下不兼容

1
window.innerWidth/innerHeight

标准模式：<!DOCTYPE html>

怪异模式：<!DOCTYPE html>删除 向后兼容

ie8及ie8以下

标准模式下

1
//document.documentElement.clientWidth/clientHeight;

怪异模式下

1
//document.body.clientWidth/clientHeight;

查看浏览器模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
document.compatMode



//返回可视区域尺寸
function getViewportOffset() {
    if (window.innerWidth) {
        return {
            w: window.innerWidth,
            h: window.innerHeight
        }
    } else {
        if (document.compatMode == "BackCompat") {
            return {
                w: document.body.clientWidth,
                h: document.body.clientHeight
            }
        } else {
            return {
                w: document.documentElement.clientWidth,
                h: document.documentElement.clientHeight
            }
        }
    }
}

查看元素的几何尺寸

1、div.getBoundingClientRect();
//返回结果静态的，不是实时的。返回一个包含left.top.right.bottom,left.top代表左上角的x.y坐标，right.bottom代表右下角的x.y坐标

2、对于无定位的父级，返回相对文档的坐标，对于有定位的父级，返回相对于最近的有定位的父级的坐标位置 忽略自身定位， 相当于父级的位置

1
offsetLeft/offsetTop

3、返回最近有无定位的父级 offsetParent

让滚动条滚动多少距离

1
2
3
window.scroll(x,y)/scrollTo(x,y);

window.scrollBy(x,y)累加滚动

获取计算样式

1
window.getComputedStyle(elem,null) 获取计算后的绝对值，获取到的为只读，ie/ie8以下不兼容

null参数：获取伪元素的属性

如下:

1
2
3
4
5
6
7
8
9
10
11
window.getComputedStyle(div,"after").width   \---->10px



div::after{
        content: "";
        width: 10px;
        height: 10px;
        background-color: green;
        display:inline-block;
    }

ele.currentStyle 获取计算后的绝对值 只读,获取的不是绝对值，是界面展示的值。ie/ie8以下

兼容性封装：

1
2
3
4
5
6
7
8
9
10
11
12
/**
    * 获取元素界面上的展示的属性
    * @param {*} elem 
    * @param {*} prop 
    */
function getStyle(elem, prop) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(elem, null)[prop];
    } else {
        return elem.currentStyle[prop];
    }
}
文章目录
  1. 1. 滚动条滚动距离
  2. 2. 可视区域窗口尺寸
  3. 3. 查看元素的几何尺寸
  4. 4. 让滚动条滚动多少距离
  5. 5. 获取计算样式