JavaScript 获取窗口属性

本文链接： https://blog.csdn.net/Reagan_/article/details/81361893

获取窗口属性

查看滚动条的滚动距离
- window.pageXOffset/pageYOffset
  - IE8及IE8以下不兼容
- document.body/documentElement.scrollLeft/scrollTop
  - 兼容性比较混乱，同时取两个值相加，因为不可能存在两个同时有值
- 封装兼容性方法，求滚动轮滚动离getScrollOffset()

为了解决兼容性的问题，我们来封装一个函数：

<script type="text/javascript">
    function getScrollOffset() {
        if(window.pageXOffset) {
            x : window.pageXoffset,
            y : window.pageYoffset
        }
        else{
            return {
                x : document.body.scrollLeft + document.documentElement.scrollLeft,
                y : document.body.scrollTop + document.documentElement.scrollTop,
            }
        }
    }
</script>

查看视口的尺寸
- window.innerWidth/innerHeight
  - IE及IE8以下不兼容
- document.documentElement.clientWidth/clientHeight
  - 标准模式下，任意浏览器都兼容
- document.body.clientWidth/clientHeight
  - 适用于怪异模式（向后兼容）下的浏览器
- 封装兼容性方法，返回浏览器视口尺寸getViewportOffset()

为了解决兼容性的问题，我们来封装一个函数:

<script type="text/javascript">
    function getSViewportOffset() {
        if(window.innerWidth) {
            return {
                w : window.innerWidth,
                h : window.innerHeight
            }
        }else{
            if(document.compatMode ==="BackCompat") {
                return {
                    w : document.body.clienWidth,
                    h : document.body.clientHeight
                }
            }else{
                return {
                    w : document.documentElement.clientWidth,
                    h : document.documrntElement.clientHeight
                }
            }
    }
</script>

查看元素的几何尺寸
- domEle.getBoundingClientRect();
- 兼容性很好
- 该方法返回一个对象，对象里面有left，top，right，bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标。
- height和width属性老版本IE不显示（人为解决：分别相减一下就能得出）
- 返回的结果并不是”实时的”
让滚动条滚动
- window上有三个方法
- scroll(x,y)在x轴、y轴上滚动的位置,scrollTo(x,y)
  让滚动条滚动到当前位置，而不是累加距离（这两种方法是完全一样的）
- scrollBy();累加滚动距离
- 三个方法功能类似，用法都是将x,y坐标传入。即实现让滚动条滚动到当前位置。
- 区别：scrollBy()会在之前的数据基础之上做累加。
- eg：利用scroll()页面定位功能。
- eg：利用scrollBy()快速阅读功能。

练习：
做一个小阅读器，会自动翻页。

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
文本内容
    <div style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</div>
    <div style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</div>
</body>
<script type="text/javascript">
    var start = document.getElement.getElementsByTagName('div')[0];
    var stop = document.getElement.getElementsByTagName('div')[1];
    var timer = 0;
    var key = true;   //加锁，防止连续点start产生累加加速
    start.onclick = function() {
        if(key) {
            timer = setInterval(function() {
                window.scollBy(0,10);
            },100);
            key = false;
        }
    }
    stop.onclick = function() {
        clearInterval(timer);
        key = true;
    }
</script>

查看元素的尺寸（视觉上的）
- dom.offsetWidth,dom.offsetHeight
查看元素的位置
- dom.offsetLeft,dom.offsetTop
- 对于无定位父级的元素，返回相对文档的坐标。对于有定位的父级元素，返回相对于最近的有定位的父级的坐标。
- dom.offsetParent
- 返回最近的有定位的父级，如无，返回body,body.offsetParent返回null
- eg：求元素相对于文档的坐标getElementPosition

JavaScript 获取窗口属性

获取窗口属性

猜你喜欢