给我一个检测最下层子节点是否隐藏和显示的案例
时间: 2024-02-09 21:13:03 浏览: 29
好的,以下是一个检测最下层子节点是否隐藏和显示的案例:
HTML 代码:
```html
<div id="container">
<div>
<p>这是一个段落</p>
</div>
</div>
```
JavaScript 代码:
```javascript
// 创建一个 MutationObserver 实例
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
// 获取发生变化的节点
const target = mutation.target;
// 判断节点是否隐藏
if (window.getComputedStyle(target).display === 'none') {
console.log('节点隐藏了');
} else {
console.log('节点显示了');
}
});
});
// 监听 container 节点及其子节点的变化
observer.observe(document.querySelector('#container'), { subtree: true, attributes: true });
```
在上面的代码中,我们首先创建了一个MutationObserver实例,并通过observe方法指定要监听的节点及其子节点。在回调函数中,我们可以获取到发生变化的节点,并通过window.getComputedStyle方法获取该节点的display样式属性,从而判断节点是否隐藏。如果节点隐藏了,就输出“节点隐藏了”,否则输出“节点显示了”。需要注意的是,我们在调用observe方法时通过subtree参数指定了要监听的子节点,这样就可以监听到最下层的子节点的变化了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)