Модификация значений CSS с помощью JavaScript

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

Извлечение значений CSS из таблицы стилей

Чтобы получить значения CSS, которые не встроенный, JavaScript обеспечивает доступ к таблицам стилей через document.styleSheets. Эта функция возвращает массив всех таблиц стилей в документе. Чтобы найти конкретную таблицу стилей, используйте свойство document.styleSheets[styleIndex].href.

Изменение правил CSS таблицы стилей

Как только нужная таблица стилей определена, переходите к следующему шагу. заключается в получении массива правил CSS. Доступ к этому массиву осуществляется с помощью свойства Rules для Internet Explorer и cssRules для большинства других браузеров. Каждое правило можно отличить по свойству selectorText.

Чтобы изменить значение CSS, установите свойство value правила. Обновленный код будет выглядеть примерно так:

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

Этот подход позволяет вам изменять значения CSS глобально, эффективно обновляя все элементы с указанным стилем.