Я хочу вызвать функцию, когда элемент больше не имеет определенного класса (без jquery)

Я делаю плагин для сайта, где я могу использовать только javascript. Я хочу выполнить код, когда элемент il с id = «gridview» больше не имеет «скрытого» класса. Спасибо за помощь.

Я уже пробовал:

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>

Какая часть вашего кода удаляет скрытый класс? Не могли бы вы тогда просто использовать выполнить свой код?

Cully 26.05.2019 02:30

@Cully Когда я нажимаю на элемент a, класс «скрытый» удаляется, но я не могу изменить HTML-код здесь, поэтому мне нужно делать все с помощью js

Karmakip 26.05.2019 02:33

Вы сказали, что хотите написать плагин. Вы имеете в виду плагин для браузера или скрипт Greasemonkey? Потому что в таких случаях я думаю, что вы ищете MutationObserver.

icecub 26.05.2019 02:44

Я делаю плагин со скриптом Tampermonkey.

Karmakip 26.05.2019 02:50

Тогда да, MutationObserver — это то, что вам нужно :)

icecub 26.05.2019 02:51

Dankje вел! @айскуб!

Karmakip 26.05.2019 03:13
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
32
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.info('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();

Спасибо за ваш ответ! Где я должен поместить свою функцию для выполнения?

Karmakip 26.05.2019 03:12

@Karmakip Я бы поместил приведенный выше код внутрь document.addEventListener("DOMContentLoaded", function(event) { .... });, чтобы убедиться, что он не пытается запустить наблюдатель до загрузки DOM. Если вы посмотрите на код, вы увидите комментарий «// Срабатывает при изменении такого атрибута, как «класс». console.info под этим просто пример. Вы можете удалить это и поместить внутрь свой собственный код или вызвать там свою функцию.

icecub 26.05.2019 03:15

Я получаю эту ошибку в консоли: TypeError: Не удалось выполнить «наблюдать» за «MutationObserver»: параметр 1 не имеет типа «Узел». (Ik zie dat je nederlands bent dat maakt me het mischien iets makelijker om te verstaan ​​:))

Karmakip 26.05.2019 03:24

@Karmakip Верно, однако это англоязычный веб-сайт, и ваш вопрос общедоступен. Даже если вы получите ответ, другие посетители с таким же или похожим вопросом не смогут его прочитать, если мы общаемся на голландском языке. Эта ошибка означает, что document.getElementById('gridview'); не работает. Он не может найти этот узел в DOM. Возможно, потому что DOM еще не загружен

icecub 26.05.2019 03:26

Другие вопросы по теме