如何创建检查div元素样式的事件侦听器?

麦可

我在我的html页面中声明了这个div:

<div class="ol-unselectable ol-layers" style="position: absolute; width: 100%; height: 100%; z-index: 0;">
</div>

在某些时候,上面显示的div元素中的样式更改为none:

<div class="ol-unselectable ol-layers" style="position: absolute; width: 100%; height: 100%; z-index: 0; display: none;">
</div>

什么时候向div元素添加显示内容:无;我需要解雇这一行:

alert("not displayed"); 

为此,我需要创建一个侦听器,当显示更改为无时,它将触发警报。

我的问题是如何使事件监听器监听div样式是否具有display: none属性?

AJ_

如果CSS中的更改是使用JavaScript完成的,则可以使用MutationObserver来检测更改。每当目标元素发生DOM更改时,它将调用给定函数。

const target = document.querySelector('.ol-unselectable');

const observer = new MutationObserver(function(mutations, observer) {
    for(let {type, target} of mutations) {
        if (type === 'attributes' && target.style.display === 'none')
            alert("not displayed")
    }
})

observer.observe(target, {attributes: true})

target.addEventListener('click', () => target.style.display='none')
.ol-unselectable {
  background: blue;
  cursor: pointer;
}
<div class="wrapper">
  <div class="ol-unselectable ol-layers" style="position: absolute; width: 50%; height: 50%; z-index: 0;">
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何检查侦听器事件是否是被动事件?

如何为没有JQuery动态创建的元素创建事件侦听器

如何检查是否有附加到元素/文档的JavaScript事件侦听器/处理程序?

如何在不使用事件侦听器的情况下检查单击的元素?

在动态创建的元素上添加事件侦听器

如何向使用 ES6 模板文字创建的元素添加函数/事件侦听器?

如何使用on('change')将事件侦听器绑定到<script>运行后创建的元素?

如何将事件侦听器添加到动态创建的HTML列表元素?

如何向原型内动态创建的元素添加事件侦听器?

如何为我们通过 javascript 创建的元素添加事件侦听器?

如何在事件侦听器上获取第一个 div 元素

如何检查是否存在动态附加的事件侦听器?

反应。如何在创建的侦听器中删除事件侦听器?

如何获取事件侦听器的已注册元素?

如何准确识别事件侦听器触发的元素?

如何为图标创建事件侦听器?

如何删除从各个要素动态创建的事件侦听器?

如何在div上使用“ keydown”事件侦听器?

向匿名元素添加伪元素和光标样式以及事件侦听器

新元素的事件侦听器(单击)。

动态创建按钮的事件侦听器

事件侦听器未创建 cookie

如何使用react和typescript将事件侦听器添加到使用ref访问的div元素?

检查元素是否具有事件侦听器。没有jQuery

如何删除事件侦听器

如何简化 javascript 事件侦听器?

Dojo-将事件侦听器添加到动态创建的元素

将事件侦听器添加到动态创建的元素中

在尝试创建事件侦听器读取的元素时,控制台抛出未定义