Greasemonkey：当 style="display: none;" 改变时如何做？

Question

我已经尝试过 attrchange、waitForKeyElements 和 MutationObserver，其中 none 对我正在尝试做的事情有效（或者我对它们的理解还不足以让它们起作用，哈哈）所以 5 小时后试图解决这个问题，我放弃了。

在我玩的网站上的迷你游戏中，最后页面顶部的一条消息显示您是赢了还是输了。 'play again' 按钮位于完成游戏的页面底部。如果不向上滚动我就看不到 win/lose 消息，所以我想将该消息克隆到屏幕下方，如下所示：

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

或

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

html 看起来像：

<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 的方法，当我尝试时我遇到了静默脚本失败。

在它们被隐藏之前克隆或移动它们没有任何作用...

在 'style' 更改后，我到底如何制作脚本运行？最好不要轮询，因为我的电脑最近表现得很懦弱……有点像事件监听器，但对于 css.

谢谢！

Answer 1

这个 plugin 很容易使用，因为我不是 grease monkey 的专家，但我正在努力提供帮助，无论如何，它的工作原理是您可以调用对属性更改的一些操作，例如 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" 一起使用，可以找到更多信息 here

编辑 2

这个plugin uses MutationObserver which i believe is a good solution , the interval is just used for old IE browsers ( guess this is not a big issue ) , find an example here

Greasemonkey：当 style="display: none;" 改变时如何做？

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

javascript

css

jquery

greasemonkey