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

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

Я НЕ говорю о:

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

I AM говорит об изменении:

#id {
    param: value;
}

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

Ответы

Ответ 1

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

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

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

Начиная с 2016 года

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

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

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

  • Правила в таблице стилей можно получить с помощью атрибутов cssRules таблицы стилей.

Ответ 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");

Демо

Ответ 3

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