Внедрение CSS как HTML через JavaScript в DOM

Question

Мне интересно, могу ли я добавить код CSS в виде строки, как я могу добавить код HTML через JavaScript, например ::

var div = document.createElement("div");
div.innerHTML =
  '<div id="hs1"></div>\n' +
  '<div id="hs2"></div>\n' +
  '<div id="hs3"></div>\n'

document.body.appendChild(div);

Могу ли я аналогичным образом добавить гигантский код CSS?

В основном у меня есть код HTML + CSS + JS, который я хочу поместить в файл .js вместо .html. Я новичок в веб-разработке, поэтому я не знаю. Это вообще возможно?

Answer 1

Вы можете использовать CSSStyleSheet интерфейс для управления таблицей стилей. В следующем примере показано, как управлять существующей таблицей стилей. Этот метод позволяет вам указать позицию вставленного правила вместо того, чтобы всегда добавлять его в конце:

document.querySelector("#button-1").addEventListener("click", function() {
  var sheet = document.querySelector("style").sheet;
  var color = "rgb(" + Math.floor(Math.random() * 256) + ", " + Math.floor(Math.random() * 256) + ", " + Math.floor(Math.random() * 256) + ")";
  sheet.insertRule("p { background-color: " + color + "; }", sheet.cssRules.length);
});

/* this stylesheet intentionally left blank */

<button id="button-1">Modify Stylesheet</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum urna risus, non finibus sem fermentum eget. In at libero a justo molestie semper. Praesent sit amet massa justo. Donec aliquet lobortis justo tincidunt ultrices.</p>

Answer 2

Да, вы пытались создать тег <style>, заполнить его правилами и ввести его?

const style = document.createElement("style");
style.innerHTML = "#foo{background-color: green;}";
document.head.appendChild(style);

<div id="foo">Foo bar</div>

Answer 3

Вы пробовали на самом деле?

document.getElementById('myButton').onclick = function() {
  var sc = document.createElement('style');
  sc.innerHTML = "#myDiv { padding: 10px; border: 1px dashed blue; }";
  
  document.getElementById('myDiv').appendChild( sc );
}

<div id="myDiv">
  Test 123
</div>
<button id="myButton">Click Me!</button>

Если у вас есть GIANT файл css. Лучше загрузить сам файл. Вы можете создать тег style, как указано выше, и установить атрибут href для его загрузки.

Answer 4

Вы можете внедрить CSS через ванильный JavaScript:

• Создать элемент стиля
• Установите его содержимое в вашей строке с помощью CSS
• Добавить элемент стиля в заголовок DOM

Пример 1 (также для более старого браузера):

// get the head and create a style element
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');

style.type = 'text/css';

// create your CSS as a string
var css = '.my-element { color: white; background: cornflowerblue; }';

// IE8 and below.
if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

// add it to the head
head.appendChild(style);

<div class="my-element">Text</div>

Пример 2 (для новых браузеров):

// create a style element
var style = document.createElement('style');

// add the CSS as a string
style.innerHTML = '.my-element { color: white; background: cornflowerblue; }';

// add it to the head
document.getElementsByTagName('head')[0].appendChild(style);

<div class="my-element">Text</div>

Пример 3 (ES6):

// create a style element
const style = document.createElement('style');

// add the CSS as a string using template literals
style.appendChild(document.createTextNode(`
  .my-element { 
    color: white; 
    background: cornflowerblue; 
  }`
));

// add it to the head
const head = document.getElementsByTagName('head')[0];
head.appendChild(style);

<div class="my-element">Text</div>