js监听document发生变化时执行
时间: 2023-08-10 13:09:34 浏览: 51
你可以使用 MutationObserver API 来监听 document 的变化。以下是一个监听子元素添加的示例:
```javascript
// 选择要观察的目标节点
const targetNode = document;
// 观察器的配置(需要观察什么变动)
const config = { childList: true };
// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
// 在这里执行你想要的操作
}
}
};
// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);
// 用配置文件对目标节点进行观察
observer.observe(targetNode, config);
```
当子元素被添加或删除时,回调函数将被触发,你可以在其中执行你想要的操作。如果需要监视其他类型的变更(例如属性变更),可以更改配置对象中的选项。
相关问题
js 监听页面宽度变化
要监听页面宽度变化,可以使用以下方法之一。首先,可以使用window对象的resize事件来监听页面大小的变化。通过添加resize事件监听器,当页面大小发生变化时,可以执行相应的操作。例如,可以使用以下代码来监听页面宽度的变化并输出宽度值:
```javascript
window.addEventListener('resize', () => {
const width = document.documentElement.clientWidth;
console.log('页面宽度发生了变化', `宽度:${width}`);
});
```
另外,也可以使用window对象的onresize属性来监听页面大小的变化。通过设置onresize属性为一个函数,当页面大小发生变化时,该函数会被调用。例如,可以使用以下代码来监听页面宽度的变化并输出宽度值:
```javascript
window.onresize = function() {
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
console.log('页面宽度发生了变化', `宽度:${width}`);
};
```
以上两种方法都可以实现对页面宽度变化的监听。具体使用哪种方法取决于个人的偏好和需求。
#### 引用[.reference_title]
- *1* [js监听页面大小变化](https://blog.csdn.net/Boale_H/article/details/130595671)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [利用原生JSJS监听窗口变化及获取窗口大小](https://blog.csdn.net/weixin_41575159/article/details/105989924)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
用js监听css样式的变化
要使用JavaScript来监听CSS样式的变化,你可以使用MutationObserver API。下面是一个基本的示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 目标元素
const target = document.querySelector('.box');
// 创建MutationObserver实例
const observer = new MutationObserver((mutationsList, observer) => {
// 处理样式变化的回调函数
for(let mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
console.log('样式发生变化');
}
}
});
// 配置观察选项
const config = { attributes: true };
// 开始观察目标元素
observer.observe(target, config);
</script>
</body>
</html>
```
上述示例中,我们使用MutationObserver来监听目标元素的样式变化。当目标元素的style属性发生变化时,会触发回调函数,并打印出"样式发生变化"的消息。
你可以根据需要修改回调函数的逻辑,来执行你想要的操作。还可以根据需要配置其他观察选项,以满足具体的监测需求。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)