当元素不再具有特定类时，我想调用一个函数

Question

我正在为一个只能使用 javascript 的网站制作插件。我想在 id = "gridview" 的 il 元素不再具有 "hidden" 类时执行代码。感谢您的帮助。我已经尝试过：document.getElementById("id="eval_grid_tab"").addEventListener("click", start);  这是 html<li id="eval_grid_tab"><a href="#gridview">Tabel</a></li><div id="gridview" class="rightsPanel smscTabsPanel hidden" style="height: 795px;">...</div>

Answer 1

为此，您需要使用MutationObserver。它监视 DOM 的更改（例如删除/添加类）并触发回调函数供您以任何您认为合适的方式使用。

// Select the node that will be observed for mutations

var targetNode = document.getElementById('gridview');

// Options for the observer (which mutations to observe)

var config = { attributes: true };

// Callback function to execute when mutations are observed

var callback = function(mutationsList, observer) {

    for(var mutation of mutationsList) {

        if (mutation.type == 'attributes') {

            // Triggers when an attribute like 'class' is modified

            console.log('The ' + mutation.attributeName + ' attribute was modified.');

        }

    }

};

// Create an observer instance linked to the callback function

var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations

observer.observe(targetNode, config);

稍后，您可以停止观察

observer.disconnect();