当前位置：首页 > 行业动态 > 正文

如何使用JavaScript获取屏幕大小并应用于div元素？

admin
行业动态
2025-01-26
3826

### 用JS获取屏幕大小的方法有使用window.screen对象、window.innerWidth和window.innerHeight属性等，可获取屏幕物理尺寸、浏览器窗口尺寸等信息。

在网页开发中，有时需要根据屏幕大小来调整页面布局或元素样式，JavaScript 提供了多种方法来获取屏幕的大小，包括视口（viewport）的宽度和高度，以及屏幕本身的物理尺寸，对于<div> 元素，虽然它本身不直接提供获取屏幕大小的功能，但可以通过 JavaScript 脚本来实现这一目的。

如何使用JavaScript获取屏幕大小并应用于div元素？第1张

使用 JavaScript 获取屏幕大小

1. 通过window.innerWidth 和window.innerHeight

这两个属性返回浏览器窗口的内部宽度和高度，包括滚动条（如果有的话），它们反映的是当前视口的大小，即用户实际看到的区域。

let screenWidth = window.innerWidth;
let screenHeight = window.innerHeight;
console.log("Screen Width: " + screenWidth);
console.log("Screen Height: " + screenHeight);

2. 通过screen.width 和screen.height

这两个属性返回整个屏幕的物理尺寸，无论窗口是否最大化，它们通常用于检测屏幕的实际分辨率，而不是当前视口的大小。

let screenPhysicalWidth = screen.width;
let screenPhysicalHeight = screen.height;
console.log("Physical Screen Width: " + screenPhysicalWidth);
console.log("Physical Screen Height: " + screenPhysicalHeight);

监听屏幕大小变化

为了在屏幕大小变化时更新页面布局或执行特定操作，可以使用resize 事件监听器。

window.addEventListener('resize', function() {
    let newScreenWidth = window.innerWidth;
    let newScreenHeight = window.innerHeight;
    console.log("New Screen Size Width: " + newScreenWidth + ", Height: " + newScreenHeight);
});

应用到 ` ` 元素

虽然上述方法直接获取的是屏幕或视口的尺寸，但你可以利用这些信息来动态调整<div> 元素的样式或布局，根据屏幕宽度改变一个<div> 的宽度或背景颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive Div Example</title>
    <style>
        #responsiveDiv {
            width: 100%;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="responsiveDiv"></div>
    <script>
        function adjustDivSize() {
            let div = document.getElementById('responsiveDiv');
            if (window.innerWidth < 600) {
                div.style.backgroundColor = 'red';
            } else {
                div.style.backgroundColor = 'green';
            }
        }
        // Initial adjustment
        adjustDivSize();
        // Adjust on resize
        window.addEventListener('resize', adjustDivSize);
    </script>
</body>
</html>

在这个例子中，当屏幕宽度小于600像素时，<div> 的背景色变为红色；否则变为绿色，这样可以根据屏幕大小灵活调整页面元素的外观。