Вставка CSS-таблицы стилей в виде строки с использованием Javascript

Я разрабатываю расширение Chrome, и хочу, чтобы пользователи могли добавлять свои собственные стили CSS, чтобы изменить внешний вид страниц расширения (а не веб-страниц). Я изучил использование document.stylesheets, но похоже, что он хочет, чтобы правила были разделены, и не позволит вам вводить полную таблицу стилей. Есть ли решение, которое позволит мне использовать строку для создания новой таблицы стилей на странице?

В настоящее время я не использую jQuery или подобное, поэтому предпочтительны чистые решения Javascript.

Ответ 1

Вы можете создать элемент стиля и добавить строку как innerHTML. Что-то вроде этого:

function addStyleString(str) {
    var node = document.createElement('style');
    node.innerHTML = str;
    document.body.appendChild(node);
}

addStyleString('body { color: red }');
addStyleString('body { background: silver }');
// This way allows you to add CSS in multiple passes

( Важное изменение: Имейте в виду, что IE9 и ниже разрешают только до 32 стилей, поэтому следите за тем, как использовать вышеприведенный фрагмент. Число было увеличено до 4095 в IE10.)

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

(function() {
    var node = document.createElement('style');
    document.body.appendChild(node);
    window.addStyleString = function(str) {
        node.innerHTML = str;
    }
}());

addStyleString('body { color: red }');
addStyleString('body { background: silver }');
// This way will remove the old style when the new one is added

Ответ 2

Благодаря этому парню, я смог найти правильный ответ. Вот как это делается:

function addCss(rule) {
  let css = document.createElement('style');
  css.type = 'text/css';
  if (css.styleSheet) css.styleSheet.cssText = rule; // Support for IE
  else css.appendChild(document.createTextNode(rule)); // Support for the rest
  document.getElementsByTagName("head")[0].appendChild(css);
}

// CSS rules
let rule  = '.red {background-color: red}';
    rule += '.blue {background-color: blue}';

// Load the rules and execute after the DOM loads
window.onload = function() {addCss(rule)};

играть на скрипке

Ответ 3

У меня была эта же самая потребность в последнее время и написала функцию, чтобы сделать то же самое, что и Liam's, за исключением того, чтобы также допускать несколько строк CSS.

injectCSS(function(){/*
    .ui-button {
        border: 3px solid #0f0;
        font-weight: bold;
        color: #f00;
    }
    .ui-panel {
        border: 1px solid #0f0;
        background-color: #eee;
        margin: 1em;
    }
*/});

// or the following for one line

injectCSS('.case2 { border: 3px solid #00f; } ');

источник этой функции. Вы можете загрузить из Github repo. Или см. Пример здесь.

Я предпочитаю использовать его с RequireJS, но он также будет работать как глобальная функция при отсутствии загрузчика AMD.