Удалите таблицу стилей CSS из DOM

#html #jquery #css

Вопрос:

Я создаю дизайн веб-сайта. Ядро разработано сторонним разработчиком и также включает в себя некоторые css. Есть один CSS-файл, который действительно портит веб-сайт. Поэтому я хотел бы удалить его из DOM. Я попытался использовать jQuery:

 $('link[rel=stylesheet][href~="./admin/include/WantToRemove.css?rev=1634758035"]').remove();

и теоретически это прекрасно работает. Однако время от времени идентификатор rev изменяется сторонним разработчиком, и код перестает работать. Имя файла .css перед обновлением не меняется.
Что-то вроде

 $('link[rel=stylesheet][href~="./admin/include/WantToRemove.css"]').remove();

на меня это не подействовало. Как я могу это исправить?

1. Не удаляйте CSS, переопределите его своими собственными правилами стиля. Хотя это очень странная вещь; просто удалите ссылку CSS из вашего собственного исходного кода.

2. Таблица стилей, которую я хочу удалить, состоит из 20000 строк кода. С бесконечными !важными заявлениями, которые регулярно обновляются. Так что очень грязно при написании моего собственного CSS. Поэтому я просто хочу, чтобы он был удален. Конечно, перезапись в большинстве случаев была бы лучшим вариантом, но я начал переписывать и сдался…

Ответ №1:

~= будет соответствовать элементам, у которых переданное значение окружено пробелами. Символ WantToRemove.css не заканчивается пробелом — вместо этого он заканчивается ?rev=someNumbers , так что, должно быть, это приводит к сбою селектора.

Используйте *= вместо этого, чтобы значение находилось в любом месте внутри атрибута, а не требовало, чтобы оно соответствовало «слову» (с пробелами на одном из концов).

 $('link[rel=stylesheet][href*="./admin/include/WantToRemove.css"]').remove();

Чтобы избежать неловкости, попробуйте запустить это как можно скорее после появления нежелательной таблицы стилей, до того, как у браузера появится возможность рисовать, иначе ваши пользователи могут увидеть, как стили веб-сайта мигают при загрузке страниц, что выглядит не очень хорошо.

Если вы можете запустить код до появления элемента CSS, вы также можете использовать вместо этого сервер MutationObserver и .remove() <link> время, когда наблюдатель обнаружит его.