JavaScript的innerWidth与innerHeight

最新推荐文章于 2025-05-29 09:00:00 发布

原创最新推荐文章于 2025-05-29 09:00:00 发布 · 648 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#innerWidth #js innerWidth #innerHeight

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个兼容多种浏览器的方法来获取窗口文档显示区域的实际宽度和高度。该方法支持IE9及更高版本的浏览器，并且考虑到了标准模式和怪异模式下的不同实现。

JavaScript的innerWidth与innerHeight

这两个属性是window对象的只读属性,声明了窗口的文档显示区的高度和宽度，以像素(px)为计量单位。 (注意：这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度)

兼容写法：

 function client() {
        if (window.innerWidth != null) {
            // ie9 +  最新浏览器
            return {
                width: window.innerWidth,
                height: window.innerHeight
            }
        }
        else if (document.compatMode === "CSS1compat") {
            // 标准浏览器
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        }
        else {
            // 怪异浏览器
            return {
                width: document.body.clientWidth,
                height: document.body.clientHeight
            }
        }
    }