Як створити тег <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?

Спробуйте додати 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');

head.appendChild(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));
}

Ось сценарій, який додає стиль IE createStyleSheet()та addRule()методи браузерам, у яких їх немає:

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;');

Я припускаю, що ви хочете вставити 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 класу

<style>теги повинні бути місцями в межах <head>елемента, а кожен доданий тег повинен бути доданий внизу <head>тегу.

Використання insertAdjacentHTML , щоб ввести тег стилю в документ голови тег :

Рідний DOM:

document.head.insertAdjacentHTML("beforeend", `<style>body{background:red}</style>`)

jQuery :

$('<style>').text("body{background:red}").appendTo(document.head)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Приклад, який працює і відповідає всім браузерам:

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

Часто виникає необхідність змінити існуючі правила, тому додавання нових стилів до HEAD працює не в кожному випадку.

Я придумав цю просту функцію, яка узагальнює всі недійсні підходи "додавання до BODY" і просто зручніша у використанні та налагодженні (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

Ця змінна об’єкт додасть тег стилю до тегу head з атрибутом типу та одним простим правилом переходу всередині, що відповідає кожному окремому id / class / елементу. Не соромтеся змінювати властивість вмісту та вводити стільки правил, скільки вам потрібно. Просто переконайтеся, що правила 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();

Ось варіант для динамічного додавання класу

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);
    }
  }
}

Все добре, але для того, щоб styleNode.cssText працював в IE6 з вузлом, створеним javascipt, вам потрібно додати вузол до документа, перш ніж встановити cssText;

додаткова інформація @ http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29.aspx

Ця функція буде вводити 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>Lorem Ipsum</h1>
  <p>dolar sit amet</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>Lorem Ipsum</h1>
  <p>dolar sit amet</p>
  <button onclick='appendExternalStyle("data:text/css;base64,OjotbW96LXNlbGVjdGlvbntjb2xvcjojZmZmIWltcG9ydGFudDtiYWNrZ3JvdW5kOiMwMDB9OjpzZWxlY3Rpb257Y29sb3I6I2ZmZiFpbXBvcnRhbnQ7YmFja2dyb3VuZDojMDAwfWgxe2ZvbnQtc2l6ZToyZW19Ym9keSxodG1se2NvbG9yOnJnYmEoMCwwLDAsLjc1KTtmb250LXNpemU6MTZweDtmb250LWZhbWlseTpMYXRvLEhlbHZldGljYSBOZXVlLEhlbHZldGljYSxzYW5zLXNlcmlmO2xpbmUtaGVpZ2h0OjEuNjd9YnV0dG9uLGlucHV0e292ZXJmbG93OnZpc2libGV9YnV0dG9uLHNlbGVjdHstd2Via2l0LXRyYW5zaXRpb24tZHVyYXRpb246LjFzO3RyYW5zaXRpb24tZHVyYXRpb246LjFzfQ==")'>press me to inject css!</button>
</body>

</html>

Ти написав:

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 році.

document.head.innerHTML += `
  <style>
    h1 {
      color: red; 
    }
    p {
      color: blue;
    }
  </style>`

<h1>I'm red!</h1>
<p>I'm blue!</p>

На сьогодні найпростішим рішенням. Все, що вам потрібно зробити, це ввести те саме, що і те, як ви зазвичай оголошували styleтеги, між підмурками

Якщо проблема, з якою ви стикаєтеся, вводить рядок 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 вище

this link may helpful to you: 

http://jonraasch.com/blog/javascript-style-node