Можно ли изменить таблицу стилей CSS с помощью JavaScript? (НЕ стиль объекта, а сама таблица стилей)

Question

Можно ли изменить таблицу стилей CSS с помощью JavaScript?

Я НЕ говорю о:

document.getElementById('id').style._____='.....';

Я АМ говорюоб изменении:

#id {
    param: value;
}

помимо того, что мы делали что-то грязное (что мы еще не пробовали, например), например, создавали новый объект в голове, вставляли там тэг styleHTML и т. д. Хотя это, даже еслиэто сработало, поставило бы несколько проблем, так как блок стиля уже определен в другом месте, и я не уверен, когда / если браузер даже проанализирует динамически созданный блок стиля?

Answer 1

По состоянию на 2011 год

Да, но вы можете столкнуться с проблемами совместимости с различными браузерами:

http://www.quirksmode.org/dom/changess.html

По состоянию на 2016 год

Поддержка браузера значительно улучшилась (поддерживается каждый браузер, включая IE9 +).

• Метод insertRule() позволяет динамически добавлять правила в таблицу стилей.

• С помощью deleteRule() можно удалить существующие правила из таблицы стилей.

• Доступ к правилам в таблице стилейчерез атрибуты cssRules таблицы стилей.

Answer 2

Мы можем использовать комбинацию .insertRule и .cssRules, чтобы иметь возможность сделать это вплоть до IE9:

function changeStylesheetRule(stylesheet, selector, property, value) {
    // Make the strings lowercase
    selector = selector.toLowerCase();
    property = property.toLowerCase();
    value = value.toLowerCase();

    // Change it if it exists
    for(var i = 0; i < s.cssRules.length; i++) {
        var rule = s.cssRules[i];
        if(rule.selectorText === selector) {
            rule.style[property] = value;
            return;
        }
    }

    // Add it if it does not
    stylesheet.insertRule(selector + " { " + property + ": " + value + "; }", 0);
}

// Used like so:
changeStylesheetRule(s, "body", "color", "rebeccapurple");

Демо

Answer 3

Когда я хочу программно добавить несколько стилей к объекту, мне легче программно добавить класс к объекту (у такого класса есть стили, связанные с ним в вашем CSS).Вы можете управлять порядком приоритета в своем CSS, чтобы новые стили из нового класса могли переопределять вещи, которые вы имели ранее.Как правило, это намного проще, чем прямое изменение таблицы стилей, и отлично работает в кросс-браузерном режиме.