Greasemonkey:当style=“display: none;”发生变化时如何做某事

Greasemonkey: How to do something when style="display: none;" changes?

本文关键字：变化 何做某 style none display Greasemonkey      更新时间：2023-09-26

我已经尝试过attrchange，waitForKeyElements和MutationObserver，但它们都不适合我想要做的事情（或者我不够了解使它们工作，哈哈），所以在试图弄清楚这一点5个小时后，我放弃了。

在我玩的网站上的一个小游戏中，页面顶部的一条消息显示你是赢了还是输了。 "再次播放"按钮位于您完成游戏的页面底部。 如果不向上滚动，我就看不到赢/输消息，所以我想像这样克隆该消息以降低屏幕：

$( ".alert alert-success" ).clone().prepend( "#play_again" );
$( ".alert alert-danger" ).clone().prepend( "#play_again" );

或

$( "#winning" ).clone().prepend( "#play_again" );
$( "#loss" ).clone().prepend( "#play_again" );

网页看起来像：

<div class="col-md-9">
    <div id="winning" class="col-md-9 col-md-offset-1" style="display: none;">
        <div class="alert alert-success"> … </div>
    </div>
    <div id="loss" class="col-md-9 col-md-offset-1" style="display: none;">
        <div class="alert alert-danger"> … </div>
    </div>

赛后：

<div id="loss" class="col-md-9 col-md-offset-1" style="">
    <div class="alert alert-danger"> … </div>

我的脚本运行得太快，我找不到任何用于 waitForKeyElements 的元素。 我想不出一种方法可以在样式更改上运行waitForKeyElements，当我尝试时，我得到一个静默脚本失败。

在它们被隐藏之前克隆或移动什么也做不了......

在"样式"更改后，我到底如何让我的脚本运行？最好不要轮询，因为我的电脑最近表现得很懦弱......类似于事件侦听器，但用于 css。

谢谢！

这个插件很容易使用，因为我对油脂猴子不是很专业，但我试图提供帮助，无论如何，它的工作原理是您可以在属性更改时调用一些操作，例如display attr。

这是一个简单的例子： 

$('#foo').styleListener({
    // the styles that you want to monitor for changes
    styles: ['visibility', 'width', 'height', 'color', 'font-size'],
    // function to be called when a monitored style changes 
    changed: function(style, newValue, oldValue, element) {
        alert(style + ' changed from ' + oldValue + ' to ' + newValue);
    }
});

编辑：

挖掘我们可以将事件侦听器与事件"DOMAttrModified"一起使用，更多信息可以在这里找到

编辑 2

这个插件使用MutationObserver，我认为这是一个很好的解决方案，间隔仅用于旧的IE浏览器（猜这不是一个大问题），在这里找到一个例子

相关文章：