JS——client

clientTop、clientLeft：

clientTop：盒子的上boder

clientLeft：盒子的左border

clientWidth与clientHeight

1、在有DTD情况下：

document.body.clientWidth、document.body.clientHeight：显示的是body的宽和高，document.documentElement.clientWidth、document.documentElement.clientHeight：显示的是body可视范围的宽和高，

2、在无DTD情况下：

document.body.clientWidth、document.body.clientHeight显示的是body可视范围的宽和高；

document.documentElement.clientWidth、document.documentElement.clientHeight显示的是body的高和body可视范围的宽（IE中显示的都是body可视范围的宽和高）

3、不管有没有DTD：

window.innerWidth、window.innerHeight：显示的都是浏览器可视范围的宽和高，包括浏览器的头部和滚动条部分（IE678无法识别window.innerWidth）

调用者的区别：

1、clientTop、clientLeft、clientWidth、clientHeight调用者是元素

2、clientX、clientY调用者是event对象

client、scroll、offset区别：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

scrollWidth = 内容宽度（不包含border）

scrollHeight = 内容高度（不包含border）

注意事项：IE67，scrollHeight即使不超出盒子，它的值也是内容的高度

兼容写法：

<script>
    document.title = client().width + "    " + client().height;
    //新事件：浏览器大小变化事件（浏览器哪怕大小变化1px也会触动这个事件）
    window.onresize = function () {
        document.title = client().width + "    " + client().height;
    }

    //获取屏幕可视区域的宽高
    function client() {
        if (window.innerHeight !== undefined) {
            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
            }
        }
    }
</script>

注意事项：window.innerWidth、window.innerHeight：显示的都是浏览器可视范围的宽和高，包括浏览器的头部和滚动条部分

转载于:https://www.cnblogs.com/wuqiuxue/p/7986952.html