DOM初探(15)——查看视口的尺寸

二:DOM基本操作:

查看视口的尺寸

     window.innerWidth/innerHeight

          IE8及以下不兼容

     document.documentElement.clientWidth/clientHeight

          标准模式下,任意浏览器都兼容

     document.body.clientWidth/clientHeight

          适用于怪异模式(没有<!DOCTYPE html>)下的浏览器

练习40:

封装兼容性方法,返回浏览器视口的尺寸getViewportOffset()。

表示:这是标准模式。

表示:向后兼容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <script type="text/javascript">
            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
                        }
                    }
                }
            }
        </script>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/hdq1745/article/details/87965677
今日推荐