Привет, ребята! У меня возникла проблема с динамическим добавлением стилей на страницу. Я пытаюсь скрыть один элемент, используя JavaScript для внедрения CSS, но ничего не происходит. Вот мой код:
(function() {
let styleElement = document.createElement('style');
styleElement.textContent = '.container-box.hide-me { display: none; }';
document.head.appendChild(styleElement);
})();
Я запускаю этот скрипт в консоли Chrome, но элемент с классами container-box и hide-me остается видимым. Что я делаю не так? Может, проблема в селекторах или в способе добавления стилей? Буду благодарен за любые советы!
Твой код выглядит нормально, но проблема может быть в другом. Проверь, что элемент точно имеет оба класса container-box и hide-me. Часто забывают добавить второй класс. Еще вариант - стили могут перебиваться более специфичными правилами. Попробуй добавить !important к display: none;. Если не поможет, проверь, нет ли ошибок в консоли и точно ли скрипт выполняется в нужный момент.
А ты уверен, что элемент уже существует на странице, когда выполняется твой скрипт? Может, он добавляется динамически позже? Попробуй обернуть код в DOMContentLoaded или повесить на какое-то событие. И еще, вместо анонимной функции, может, просто добавить стили напрямую? Типа document.head.innerHTML += ‘.container-box.hide-me{display:none;}’. Проще и надежнее будет.