我想在元素不再具有特定 class（没有 jquery）时调用函数

Question

我正在为我只能使用 javascript 的网站制作插件。我想在 id = "gridview" 的 il 元素不再具有 "hidden" class 时执行代码。感谢您的帮助。

我已经试过了：

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();

我想在元素不再具有特定 class（没有 jquery）时调用函数

I want to call a function when an element no longer has a specific class (no jquery)

javascript

hidden

class