抱歉，您的浏览器无法访问本站

client 家族的组成

clientWidth 和 clientHeight

盒子调用时：

• clientWidth：获取盒子区域宽度（padding + width）。

• clientHeight：获取盒子区域高度（padding + height）。

body/html调用时：

• clientWidth：获取网页可视区域宽度。

• clientHeight：获取网页可视区域高度。

clientX 和 clientY

event调用：

• clientX：鼠标距离可视区域左侧距离。

• clientY：鼠标距离可视区域上侧距离。

clientTop 和 clientLeft

• clientTop：盒子的上border。

• clientLeft：盒子的左border。

三大家族 offset/scroll/client 的区别

区别1：宽高

• offsetWidth = width + padding + border

• offsetHeight = height + padding + border

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

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

• clientWidth = width + padding

• clientHeight = height + padding

区别2：上左

offsetTop/offsetLeft：

• 调用者：任意元素。(盒子为主)
• 作用：距离父系盒子中带有定位的距离。

scrollTop/scrollLeft：

• 调用者：document.body.scrollTop（window调用）(盒子也可以调用，但必须有滚动条)
• 作用：浏览器无法显示的部分（被卷去的部分）。

clientY/clientX：

• 调用者：event
• 作用：鼠标距离浏览器可视区域的距离（左、上）。

函数封装：获取浏览器的宽高（可视区域）

函数封装如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//函数封装：获取屏幕可视区域的宽高
function client() {
    if (window.innerHeight !== undefined) {
        //ie9及其以上的版本的写法
        return {
            "width": window.innerWidth,
            "height": window.innerHeight
        }
    } else if (document.compatMode === "CSS1Compat") {
        //标准模式的写法（有DTD时）
        return {
            "width": document.documentElement.clientWidth,
            "height": document.documentElement.clientHeight
        }
    } else {
        //没有DTD时的写法
        return {
            "width": document.body.clientWidth,
            "height": document.body.clientHeight
        }
    }
}

案例：根据浏览器的可视宽度，给定不同的背景�