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

Question

Я ищу способ вставить тег <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?

Answer 1

Если проблема, с которой вы сталкиваетесь, заключается в вставке строки 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 и выше

Answer 2

Вы писали:

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 году.

Answer 3

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% рабочий код, пример выше