JavaScript 获取窗口属性

2018-8-3    seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

获取窗口属性

  • 查看滚动条的滚动距离 
    • 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>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    •
  • 查看视口的尺寸 
    • 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>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    •

  • 查看元素的几何尺寸

    • 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>
    
    

        
  • 
            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
        
    • 

        
  • 
            26
        
    • 

        
  • 
            27
        
    • 

        
  • 
            28
        
    •

分享本文至：
« 云图项目设计思路分享 浅谈谷歌Circle UI »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档