JQuery监听div宽度的变化|极客教程

JQuery监听div宽度的变化

在前端开发中，监测元素的尺寸变化是一项常见的任务。特别是在响应式设计中，当页面布局在不同的设备上展示时，我们需要根据元素的宽度进行相应的调整。

在本文中，我们将介绍如何使用JQuery来监听一个div宽度的变化。我们将通过编写一个简单的示例来演示这一过程。

1. 创建HTML结构

首先，我们需要创建一个HTML文件，并在其中包含一个div元素，我们将监听该元素的宽度变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听div宽度变化</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="myDiv" style="width: 200px; height: 200px; background-color: #f0f0f0;"></div>
</body>
</html>

在这段代码中，我们创建了一个id为myDiv的div元素，设置了宽度为200px，并给它一个灰色的背景色。

2. JQuery监听宽度变化

接下来，我们将使用JQuery编写代码来监听myDiv元素宽度的变化。当div的宽度发生变化时，我们将在控制台打印出新的宽度值。

$(document).ready(function() {
    const target = $('#myDiv')[0];

    let observer = new ResizeObserver(entries => {
        for (let entry of entries) {
            console.log('Div宽度变化为：', entry.contentRect.width);
        }
    });

    observer.observe(target);
});

在这段代码中，我们首先使用$(document).ready()函数来确保文档加载完成后再执行代码。然后我们使用$('#myDiv')[0]来获取到myDiv元素的原生DOM节点，并将其赋值给target变量。

接下来，我们创建了一个ResizeObserver实例，并通过observe()方法指定要观察的目标元素为target，即myDiv元素。当myDiv元素的尺寸发生变化时，触发回调函数，打印出新的宽度值。

3. 示例演示

现在，我们打开浏览器并加载这个HTML文件，可以看到页面上展示了一个灰色的200×200的div元素。我们可以通过调整浏览器窗口的大小，或者通过其他方式改变div的宽度，来查看控制台中打印出的宽度值。

当我们改变div的宽度时，控制台会输出类似以下的信息：

Div宽度变化为： 250
Div宽度变化为： 300
Div宽度变化为： 180

4. 总结

通过本文的介绍，我们学习了如何使用JQuery来监听一个div元素的宽度变化。通过这种方式，我们可以在div的尺寸发生变化时做出相应的处理，使得我们的页面能够更好地适应不同的屏幕尺寸和设备。

JQuery监听div宽度的变化