获取窗口属性，获取dom尺寸

获取窗口属性 - dom基本操作

- 滚动条滚动距离
除IE9以下都支持W3C标准，IE9以上可用 window.pageXOffset
IE8及以下
——document.body.scrollLeft
——document,doucumentElement.scrollLeft
由于二者是冲突的，一个能用就不用用另一个，且不能用的值为0
所以用二者的加和——》document.body.scrollLeft+document.documentElement.scrollLeft
封装一个方法：

function getScrollOffset() {
    if (window.pageXOffset) {
        return {
            x: window.pageXOffset,
            y: window.pageYOffset
        };
    } else {
        return {
            x: document.body.scrollLeft + document.documentElement.scrollLeft,
            y: document.body.scrollTop + document.documentElement.scrollTop
        };
    }
}

- 让滚动条滚动
window上面有三种方法，scroll(x,y) = scrollTo(x,y)位置
scrollBy(x,y)距离，所以会累加
利用scrillBy实现快速阅读：

<div style="width: 100px;height: 100px;background-color:rgba(255, 0,255, 0.5);color: blue;font-size: 18px;text-align: center;position: fixed;bottom: 200px;right: 100px;line-height: 100px;border-radius: 50%;">
        start
    </div>
    <div style="width: 100px;height: 100px;background-color:rgba(158, 255,0, 0.5);color: blue;font-size: 18px;text-align: center;position: fixed;bottom: 100px;right: 100px;line-height: 100px;border-radius: 50%;">
        stop
    </div>
    <script>
        var start = document.getElementsByTagName("div")[0];
        var stop = document.getElementsByTagName("div")[1];
        var timer = 0,
            key = true;
        // 多次点击会形成多个定时器，你能不关闭了！
        start.onclick = function() {
            if (key) {
                timer = setInterval(function() {
                    window.scrollBy(0, 10);
                }, 100);
            }
            key = false;
        };
        stop.onclick = function() {
            key = true;
            clearInterval(timer);
        };
    </script>

展开收起的功能实现

var div = document.getElementsByTagName("div")[0];
        var btn = document.getElementsByTagName("button")[0];
        var xPos = 0,
            yPos = 0,
            key = true;
        btn.onclick = function() {
            if (key) {
                xPos = getScrollOffset()["x"];
                yPos = getScrollOffset()["y"];
                div.style.height = "600px";
                // div.className = "name";
                this.innerText = "收起";
                key = false;
            } else {
                div.style.height = "198px";
                div.style.overflow = "hidden";
                window.scrollTo(xPos, yPos);
                this.innerText = "展开";
                key = true;
            }
        };

- 可视区窗口的尺寸
编写的Html的内容
window.innerWidth/window.innerHeight(W3C标准)
IE8及以下
标准模式：document.documentElement.clientHeight
怪异模式:以后兼容混杂模式兼容以前的浏览器渲染模式

<!DOCTYPE html>

这句话的意思就是启动标准模式
document.body.clientHeight
封装函数：

function getViewportOffset() {
    if (window.innerHeight) {
        return {
            width: window.innerWidth,
            height: window.innerHeight
        };
    } else {
        if (window.compatMode == "BackCompat") {
            return {
                width: document.body.clientWidth,
                height: document.body.clientHeight
            };
        } else {
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            };
        }
    }
}

- 查看元素的几何尺寸
div.getBoundingClientRect()
返回对象ClientRect 不是实时的
在这里插入图片描述
div.offsetHeight/div.offsetWidth
求的是什么宽高，是内容还是什么，就是说加不加padding

这两种方法都会加上padding，求的是视觉上的尺寸！

- 查看元素的位置
dom.offsetTop/dom.offsetLeft
这种方法不理想，在元素嵌套时候不合适！
忽略自身的定位，有定位的父级元素的距离！对于没有定位父级元素的，返回相对文档的位置！position:static默认情况！
纵向会发生塌陷！
dom.offsetParent返回最近的具有定位属性的父级元素！若无则返回body,body.offsetParent返回null
封装函数：

function getElementPosition(elem) {
    var topPosition = 0,
        leftPosition = 0;
    while (elem.offsetParent) {
        topPosition += elem.offsetTop;
        leftPosition += elem.offsetLeft;
        elem = elem.offsetParent;
    }
    return {
        top: topPosition,
        left: leftPosition
    };
}

在这里插入图片描述

web-wj

发布了37 篇原创文章 · 获赞 0 · 访问量 693

私信关注

获取窗口属性，获取dom尺寸

获取窗口属性 - dom基本操作

猜你喜欢