it-swarm.com.ru

Как создать тег <style> с помощью Javascript?

Я ищу способ вставить тег <style> в HTML-страницу с помощью JavaScript.

Лучший способ, который я нашел до сих пор:

var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);

Это работает в Firefox, Opera и Internet Explorer, но не в Google Chrome. Также немного уродливо с <br> впереди для IE.

Кто-нибудь знает способ создания тега <style>, который

  1. Приятнее

  2. Работает с Chrome?

Или, может быть

  1. Это нестандартная вещь, которую я должен избегать

  2. Три работающих браузера великолепны, а кто вообще использует Chrome?

282
Arend

Попробуйте добавить элемент style в head, а не body.

Это было проверено в IE (7-9), Firefox, Opera и Chrome:

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);
559
Christoph

Вот скрипт, который добавляет методы createStyleSheet() и addRule() в стиле IE к браузерам, у которых их нет:

if(typeof document.createStyleSheet === 'undefined') {
    document.createStyleSheet = (function() {
        function createStyleSheet(href) {
            if(typeof href !== 'undefined') {
                var element = document.createElement('link');
                element.type = 'text/css';
                element.rel = 'stylesheet';
                element.href = href;
            }
            else {
                var element = document.createElement('style');
                element.type = 'text/css';
            }

            document.getElementsByTagName('head')[0].appendChild(element);
            var sheet = document.styleSheets[document.styleSheets.length - 1];

            if(typeof sheet.addRule === 'undefined')
                sheet.addRule = addRule;

            if(typeof sheet.removeRule === 'undefined')
                sheet.removeRule = sheet.deleteRule;

            return sheet;
        }

        function addRule(selectorText, cssText, index) {
            if(typeof index === 'undefined')
                index = this.cssRules.length;

            this.insertRule(selectorText + ' {' + cssText + '}', index);
        }

        return createStyleSheet;
    })();
}

Вы можете добавить внешние файлы через

document.createStyleSheet('foo.css');

и динамически создавать правила с помощью

var sheet = document.createStyleSheet();
sheet.addRule('h1', 'background: red;');
32
Christoph

Я предполагаю, что вы хотите вставить тег style вместо тега link (ссылаясь на внешний CSS), так что это делает следующий пример:

<html>
 <head>
  <title>Example Page</title>
 </head>
 <body>
  <span>
   This is styled dynamically via JavaScript.
  </span>
 </body>
 <script type="text/javascript">
   var styleNode = document.createElement('style');
   styleNode.type = "text/css";
   // browser detection (based on prototype.js)
   if(!!(window.attachEvent && !window.opera)) {
        styleNode.styleSheet.cssText = 'span { color: rgb(255, 0, 0); }';
   } else {
        var styleText = document.createTextNode('span { color: rgb(255, 0, 0); } ');
        styleNode.appendChild(styleText);
   }
   document.getElementsByTagName('head')[0].appendChild(styleNode);
 </script>
</html>

Кроме того, я заметил в вашем вопросе, что вы используете innerHTML. На самом деле это нестандартный способ вставки данных на страницу. Рекомендуется создать текстовый узел и добавить его к другому элементному узлу.

Что касается вашего последнего вопроса, вы услышите, как некоторые люди говорят, что ваша работа должна работать во всех браузерах. Все зависит от вашей аудитории. Если никто из вашей аудитории не использует Chrome, не переживайте; однако, если вы хотите охватить как можно большую аудиторию, лучше всего поддерживать все основные браузеры класса A

29
Tom

Пример, который работает и совместим со всеми браузерами:

var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);
21
belaz

Для тех, кто уже использует jQuery , вы можете использовать эту строку:

$('<style>'+ styles +'</style>').appendTo(document.head);
15
vsync

Часто возникает необходимость переопределить существующие правила, поэтому добавление новых стилей в HEAD работает не во всех случаях.

Я придумал эту простую функцию, которая суммирует все подходы недействительно «добавить к телу» и просто удобнее использовать и отлаживать (IE8 +).

window.injectCSS = (function(doc){
    // wrapper for all injected styles and temp el to create them
    var wrap = doc.createElement('div');
    var temp = doc.createElement('div');
    // rules like "a {color: red}" etc.
    return function (cssRules) {
        // append wrapper to the body on the first call
        if (!wrap.id) {
            wrap.id = 'injected-css';
            wrap.style.display = 'none';
            doc.body.appendChild(wrap);
        }
        // <br> for IE: http://goo.gl/vLY4x7
        temp.innerHTML = '<br><style>'+ cssRules +'</style>';
        wrap.appendChild( temp.children[1] );
    };
})(document);

Демо: codepen , jsfiddle

6
Garlaro

Вот вариант для динамического добавления класса 

function setClassStyle(class_name, css) {
  var style_sheet = document.createElement('style');
  if (style_sheet) {
    style_sheet.setAttribute('type', 'text/css');
    var cstr = '.' + class_name + ' {' + css + '}';
    var rules = document.createTextNode(cstr);
    if(style_sheet.styleSheet){// IE
      style_sheet.styleSheet.cssText = rules.nodeValue;
    } else {
      style_sheet.appendChild(rules);
    }
    var head = document.getElementsByTagName('head')[0];
    if (head) {
      head.appendChild(style_sheet);
    }
  }
}
5
Michael

Все хорошо, но для того, чтобы styleNode.cssText работал в IE6 с узлом, созданным javascipt, вам нужно добавить узел в документ, прежде чем устанавливать cssText;

дополнительная информация @ http://msdn.Microsoft.com/en-us/library/ms533698%28VS.85%29.aspx

4
Tony

Эта переменная объекта добавит тег стиля к тегу head с атрибутом type и одним простым правилом перехода внутри, который соответствует каждому отдельному идентификатору/классу/элементу. Не стесняйтесь изменять content property и вводить столько правил, сколько вам нужно. Просто убедитесь, что правила CSS внутри содержимого остаются в одной строке (или «экранируйте» каждую новую строку, если Вы предпочитаете так). 

var script = {

  type: 'text/css', style: document.createElement('style'), 
  content: "* { transition: all 220ms cubic-bezier(0.390, 0.575, 0.565, 1.000); }",
  append: function() {

    this.style.type = this.type;
    this.style.appendChild(document.createTextNode(this.content));
    document.head.appendChild(this.style);

}}; script.append();
4
Spooky

Эта функция будет грамматически вставлять CSS каждый раз, когда вы вызываете функцию appendStyle следующим образом: appendstyle('css you want to inject'). это работает путем внедрения узла style в заголовок документа. это метод, подобный тому, что люди используют для отложенной загрузки javascript. работает стабильно в большинстве браузеров.

appendStyle = function (content) {
      style = document.createElement('STYLE');
      style.type = 'text/css';
      style.appendChild(document.createTextNode(content));
      document.head.appendChild(style);

    }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <h1>this is injected css</h1>
  <p>heloo, this is stuff, hkasjdhakhd</p>
  <button onclick='appendStyle("body {background-color:#ff0000;} h1{font-family:Helvetica, sans-serif;font-variant:small-caps;letter-spacing:3px;color:#ff0000;background-color:#000000;} p {font-family:Georgia, serif;font-size:14px;font-style:normal;font-weight:normal;color:#000000;background-color:#ffff00;}")'>press me to inject css!</button>
</body>

</html>
Вы также можете лениво загружать внешние CSS-файлы, используя следующий фрагмент:

appendExternalStyle = function (content) {
      link = document.createElement('LINK');
      link.rel = 'stylesheet';
      link.href = content;
      link.type = 'text/css'; 
      document.head.appendChild(link);

    }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>html{font-family: sans-serif; 
font-display: swap;}</style>
</head>
<body>

  <h1>this is injected css</h1>
  <p>heloo, this is stuff, hkasjdhakhd</p>
  <button onclick='appendExternalStyle("data:text/css;base64,OjotbW96LXNlbGVjdGlvbntjb2xvcjojZmZmIWltcG9ydGFudDtiYWNrZ3JvdW5kOiMwMDB9OjpzZWxlY3Rpb257Y29sb3I6I2ZmZiFpbXBvcnRhbnQ7YmFja2dyb3VuZDojMDAwfWgxe2ZvbnQtc2l6ZToyZW19Ym9keSxodG1se2NvbG9yOnJnYmEoMCwwLDAsLjc1KTtmb250LXNpemU6MTZweDtmb250LWZhbWlseTpMYXRvLEhlbHZldGljYSBOZXVlLEhlbHZldGljYSxzYW5zLXNlcmlmO2xpbmUtaGVpZ2h0OjEuNjd9YnV0dG9uLGlucHV0e292ZXJmbG93OnZpc2libGV9YnV0dG9uLHNlbGVjdHstd2Via2l0LXRyYW5zaXRpb24tZHVyYXRpb246LjFzO3RyYW5zaXRpb24tZHVyYXRpb246LjFzfQ==")'>press me to inject css!</button>
</body>

</html>

3
Joel Ellis
var list = document.querySelector("head");
list.innerHTML += '<style>
                      h3.header-6.basket-item--header 
                      span.cusplus {
                         color:#c00; 
                      }.
                      cusname{
                         color:grey;font-size:14px;
                      }
                  </style>';

200% рабочий код, пример выше

0
Kabirr singh sahni

Вы написали:

var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);

Почему не это?

var styleNode = document.createElement("style");
document.head.appendChild(styleNode);

Отныне вы можете легко добавлять правила CSS в код HTML:

styleNode.innerHTML = "h1 { background: red; }\n";
styleNode.innerHTML += "h2 { background: green; }\n";

... или напрямую в DOM:

styleNode.sheet.insertRule("h1 { background: red; }");
styleNode.sheet.insertRule("h2 { background: green; }");

Я ожидаю, что это будет работать везде, кроме устаревших браузеров.

Определенно работает в Chrome в 2019 году.

0
7vujy0f0hy

Если проблема, с которой вы сталкиваетесь, заключается в том, чтобы вставить на страницу строку CSS, это проще сделать с помощью элемента <link>, чем элемента <style>.

Следующее добавляет правило p { color: green; } на страницу.

<link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8,p%20%7B%20color%3A%20green%3B%20%7D" />

Вы можете создать это в JavaScript просто по URL, кодирующему вашу строку CSS и добавляющему его в атрибут HREF. Гораздо проще, чем все причуды элементов <style> или прямой доступ к таблицам стилей.

let linkElement: HTMLLinkElement = this.document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(myStringOfstyles));

Это будет работать в IE 5.5 и выше

0
moefinley