JS如何获取屏幕宽度

1. 介绍

在Web开发中，有时候我们需要根据浏览器窗口的宽度来调整页面的布局或者样式。JavaScript提供了几种方法可以获取屏幕宽度，本文将详细介绍这些方法。

2. window对象的属性

window对象是JavaScript中的全局对象，表示整个浏览器窗口。通过window对象的属性，我们可以获取浏览器窗口的宽度。

2.1 window.innerWidth

window.innerWidth属性返回浏览器窗口的视口（viewport）宽度，即除去工具栏、滚动条等非页面部分的可视区域宽度。这个值是一个整数，不包括滚动条的宽度。

console.log(window.innerWidth);

运行以上代码，将会在控制台输出当前浏览器窗口的宽度。

2.2 window.outerWidth

window.outerWidth属性返回浏览器窗口的外部宽度，包括工具栏、滚动条等非页面部分的宽度。这个值是一个整数。

console.log(window.outerWidth);

运行以上代码，将会在控制台输出当前浏览器窗口的外部宽度。

3. document对象的属性

document对象表示当前页面，通过document对象的属性，我们也可以获取浏览器窗口的宽度。

3.1 document.documentElement.clientWidth

document.documentElement.clientWidth属性返回当前页面的文档元素（即标签）的宽度。这个值是一个整数，不包括滚动条的宽度。

console.log(document.documentElement.clientWidth);

运行以上代码，将会在控制台输出当前页面的文档元素的宽度。

3.2 document.body.clientWidth

document.body.clientWidth属性返回当前页面的标签的宽度。这个值是一个整数，不包括滚动条的宽度。

console.log(document.body.clientWidth);

运行以上代码，将会在控制台输出当前页面的标签的宽度。

4. 屏幕对象的属性

屏幕对象表示用户的显示屏幕，通过屏幕对象的属性，我们也可以获取屏幕的宽度。

4.1 screen.width

screen.width属性返回屏幕的宽度，以像素为单位。这个值是一个整数。

console.log(screen.width);

运行以上代码，将会在控制台输出屏幕的宽度。

4.2 screen.availWidth

screen.availWidth属性返回屏幕的有效宽度，即减去任务栏、侧边栏等系统保留区域的宽度。这个值是一个整数。

console.log(screen.availWidth);

运行以上代码，将会在控制台输出屏幕的有效宽度。

5. 样式对象的属性

每个HTML元素都有一个样式对象，通过样式对象的属性，我们可以获取元素的宽度。这里以body元素为例进行说明。

5.1 document.body.style.width

document.body.style.width属性返回页面的元素的宽度，不包括边框、内边距和滚动条的宽度。这个值的类型可以是字符串，因此需要使用parseInt函数将其转换为整数。

console.log(parseInt(document.body.style.width));

运行以上代码，将会在控制台输出页面的元素的宽度。

6. 综合应用

下面是一个综合应用的例子，当浏览器窗口的宽度小于600像素时，改变页面背景颜色。

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: white;
        }
    </style>
</head>
<body>
    <script>
        function changeBackgroundColor() {
            if (window.innerWidth < 600) {
                document.body.style.backgroundColor = 'pink';
            } else {
                document.body.style.backgroundColor = 'white';
            }
        }

        // 页面加载完成后执行changeBackgroundColor函数
        window.onload = changeBackgroundColor;

        // 浏览器窗口大小改变时执行changeBackgroundColor函数
        window.onresize = changeBackgroundColor;
    </script>
</body>
</html>

在上述例子中，当浏览器窗口的宽度小于600像素时，页面背景颜色将会变为粉色（pink）；当浏览器窗口宽度大于等于600像素时，页面背景颜色将会变为白色（white）。