Вот неловко простой трюк, который я использовал для динамического манипулирования правилами класса CSS, который уклоняется от сложностей (таких как анализ правил, чтобы найти то, что вам нужно, как отмечено ожидаемым ответом), и даже предоставляет некоторые дополнительные гибкость бесплатно.
(Примечание: предыдущая попытка добавления этого ответа получила немедленное понижение в течение нескольких секунд без обратной связи одной из нескольких целей автоматического уведомления этого Я не уверен, что короткого времени реакции коленного рефлекса было достаточно, чтобы понять, почему это надежное решение, которое хорошо охватывает сценарий использования ОП, тем не менее я перефразировал его, полагая, что повествование могло каким-то образом послужить толчком. отсутствие точек с запятой (которые я сейчас добавил для него). Или отсутствие ненужных фигурных скобок (также добавлено). Или отсутствие примечаний о неэффектах (добавлено). Или не использование достаточно сложного метода (выиграл ' исправить, даже упростил код еще немного). Я уверен, что он ударит снова анонимно, но все же повторите попытку, потому что это чистая и надежная техника, которую стоит использовать.)
ПРИМЕЧАНИЕ: Этот подход предполагает, что у вас есть достаточный контроль над стилем страницы, чтобы одно и то же правило класса не могло создать , созданное другим методом. (И он ожидает, что элемент HEAD существует.)
(Одной из возможных затрат такого подхода может быть повторный рендеринг на innerHtml, но поскольку мы все равно меняем CSS, перерисовка неизбежна. Кроме того, innerHtml выполняется для неотображаемого элемента, поэтому браузеры могут оптимизировать его, даже если это имеет значение.)
OK. Поскольку у вас может быть любое количество элементов STYLE, то вполне можно обернуть ваш динамический класс в отдельный отдельный. Хм, вот и все. :) Затем добавьте id или, что еще лучше, *, атрибут class к оболочке STYLE, чтобы вы могли практически получить доступ к своему правилу класса и манипулировать им, как если бы это был элемент DOM , Просто убедитесь, что он добавлен / заменен в <style class="..."> ... </style>.
Бонус: вы также можете сгруппировать несколько связанных правил и заменить их все сразу, если хотите (с тривиальными изменениями):
function replace_class(classname, block) {
// Remove old:
var s = document.head.querySelector("style." + classname);
if (s) { document.head.removeChild(s); }
// Just delete?
if (!block) { return; }
// Add new:
s = document.createElement("style");
s.className = classname;
s.innerHTML = ("." + classname + block); // <style class="classname">.classname{...}</style>
document.head.appendChild(s);
}
Затем обновить: replace_class("menu", "{font-size: 8px;}").
Или удалить: replace_class("menu", null).
* Поскольку CSS применяется к каждому элементу, вы можете задаться вопросом, почему сам по себе STYLE не будет неожиданно отображен, если в вашем новом классе display: ... имеет что-то другое, чем none. Ну, было бы , если бы оно было вставлено в BODY! Но, поскольку мы добавляем его в HEAD, рендеринг пропускается (если, конечно, вы не решите также отобразить HEAD). Или вы могли бы также использовать id вместо этого, но тогда вам пришлось изобрести / использовать правильную область видимости / префикс, и зачем вам это, если его можно пощадить? (И мне также нравится тонкая дерзость установки class, когда это классная оболочка в любом случае ...)