Як додати CSS за допомогою Javascript?

Як ви додаєте правила CSS (наприклад strong { color: red }) за допомогою Javascript?

Ви можете також зробити це за допомогою інтерфейсів CSS DOM рівня 2 ( MDN ):

var sheet = window.document.styleSheets[0];
sheet.insertRule('strong { color: red; }', sheet.cssRules.length);

... на всіх, крім (природно) IE8 та попереднього, який використовує своє власне незначне формулювання:

sheet.addRule('strong', 'color: red;', -1);

У цьому є теоретична перевага порівняно з методом createElement-set-innerHTML, оскільки вам не доведеться турбуватися про введення спеціальних символів HTML у innerHTML, але на практиці елементами стилю є CDATA у застарілому HTML і '<' і "&" рідко використовуються в таблицях стилів.

Вам потрібна таблиця стилів, перш ніж ви можете почати додавати її так. Це може бути будь-який існуючий активний аркуш стилів: зовнішній, вбудований або порожній, не має значення. Якщо його немає, єдиний стандартний спосіб створити його на даний момент - це створити createElement.

Простий і прямий підхід - створити та додати новий styleвузол до документа.

// Your CSS as text
var styles = `
    .qwebirc-qui .ircwindow div { 
        font-family: Georgia,Cambria,"Times New Roman",Times,serif;
        margin: 26px auto 0 auto;
        max-width: 650px;
    }
    .qwebirc-qui .lines {
        font-size: 18px;
        line-height: 1.58;
        letter-spacing: -.004em;
    }

    .qwebirc-qui .nicklist a {
        margin: 6px;
    }
`

var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

Рішення Бена Бланка для мене не працює в IE8.

Однак це працювало в IE8

function addCss(cssCode) {
var styleElement = document.createElement("style");
  styleElement.type = "text/css";
  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = cssCode;
  } else {
    styleElement.appendChild(document.createTextNode(cssCode));
  }
  document.getElementsByTagName("head")[0].appendChild(styleElement);
}

Ось трохи оновлена ​​версія рішення Кріса Херрінга з урахуванням того, що ви також можете використовувати innerHTMLзамість створення нового текстового вузла:

function insertCss( code ) {
    var style = document.createElement('style');
    style.type = 'text/css';

    if (style.styleSheet) {
        // IE
        style.styleSheet.cssText = code;
    } else {
        // Other browsers
        style.innerHTML = code;
    }

    document.getElementsByTagName("head")[0].appendChild( style );
}

Найкоротший лайнер

// One liner function:
const addCSS = s =>(d=>{d.head.appendChild(d.createElement("style")).innerHTML=s})(document);

// Usage: 
addCSS("body{ background:red; }")

Ви можете додавати класи або атрибути стилю на елемент за елементами.

Наприклад:

<a name="myelement" onclick="this.style.color='#FF0';">text</a>

Там, де ви могли б це зробити.style.background, this.style.font-size тощо. Ви також можете застосувати стиль, використовуючи цей самий метод ala

this.className='classname';

Якщо ви хочете зробити це у функції javascript, ви можете використовувати getElementByID, а не «це».

Цей простий приклад додавання <style>в голову html

var sheet = document.createElement('style');
sheet.innerHTML = "table th{padding-bottom: 0 !important;padding-top: 0 !important;}\n"
+ "table ul {    margin-top: 0 !important;    margin-bottom: 0 !important;}\n"
+ "table td{padding-bottom: 0 !important;padding-top: 0 !important;}\n"
+ ".messages.error{display:none !important;}\n"
+ ".messages.status{display:none !important;} ";

document.body.appendChild(sheet); // append in body
document.head.appendChild(sheet); // append in head

Динамічний стиль джерела - маніпулювання CSS за допомогою JavaScript

ЮІІ недавно додав утиліту спеціально для цього. Дивіться стилі.js тут.

Це моє рішення додати правило css в кінці списку останнього стилю:

var css = new function()
{
    function addStyleSheet()
    {
        let head = document.head;
        let style = document.createElement("style");

        head.appendChild(style);
    }

    this.insert = function(rule)
    {
        if(document.styleSheets.length == 0) { addStyleSheet(); }

        let sheet = document.styleSheets[document.styleSheets.length - 1];
        let rules = sheet.rules;

        sheet.insertRule(rule, rules.length);
    }
}

css.insert("body { background-color: red }");

Іншим варіантом є використання JQuery для зберігання властивості стилю в рядку, додавання до нього, а потім оновлення властивості стилю елемента на нові значення. Так:

function appendCSSToElement(element, CssProperties)
        {
            var existingCSS = $(element).attr("style");

             if(existingCSS == undefined) existingCSS = "";

            $.each(CssProperties, function(key,value)
            {
                existingCSS += " " + key + ": " + value + ";";
            });

            $(element).attr("style", existingCSS);

            return $(element);
        }

А потім виконати його з новими атрибутами CSS як об’єкт.

appendCSSToElement("#ElementID", { "color": "white", "background-color": "green", "font-weight": "bold" });

Це не обов'язково може бути найефективнішим методом (я відкритий для пропозицій, як це покращити. :)), але він безумовно працює.

Ось зразок шаблону, який допоможе розпочати роботу

Потрібно 0 бібліотек та використовує лише javascript для введення як HTML, так і CSS.

Функція була запозичена у користувача @Husky вище

Корисно, якщо ви хочете запустити сценарій тампермоневі і хочете додати переключення на веб-сайті (наприклад, додаток для примітки)

// INJECTING THE HTML
document.querySelector('body').innerHTML += '<div id="injection">Hello World</div>';

// CSS INJECTION FUNCTION
///programming/707565/how-do-you-add-css-with-javascript
function insertCss( code ) {
    var style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet) {
        // IE
        style.styleSheet.cssText = code;
    } else {
        // Other browsers
        style.innerHTML = code;
    }
    document.getElementsByTagName("head")[0].appendChild( style );
}

// INJECT THE CSS INTO FUNCTION
// Write the css as you normally would... but treat it as strings and concatenate for multilines
insertCss(
  "#injection {color :red; font-size: 30px;}" +
  "body {background-color: lightblue;}"
)

якщо вам відомо щонайменше один <style>тег на сторінці, скористайтеся цією функцією:

CSS=function(i){document.getElementsByTagName('style')[0].innerHTML+=i};

використання:

CSS("div{background:#00F}");

Ось моя функція загального призначення, яка параметризує селектор CSS та правила, і, за бажанням, приймає ім'я файлу css (залежно від регістру), якщо ви хочете замість цього додати до певного аркуша (інакше, якщо ви не вкажете імені файлу CSS, це створить новий елемент стилю і додасть його до існуючої голови. Він створить щонайменше один новий стиль стилю та повторно використовувати його при майбутніх викликах функцій). Працює з FF, Chrome та IE9 + (можливо, раніше також не перевірено).

function addCssRules(selector, rules, /*Optional*/ sheetName) {
    // We want the last sheet so that rules are not overridden.
    var styleSheet = document.styleSheets[document.styleSheets.length - 1];
    if (sheetName) {
        for (var i in document.styleSheets) {
            if (document.styleSheets[i].href && document.styleSheets[i].href.indexOf(sheetName) > -1) {
                styleSheet = document.styleSheets[i];
                break;
            }
        }
    }
    if (typeof styleSheet === 'undefined' || styleSheet === null) {
        var styleElement = document.createElement("style");
        styleElement.type = "text/css";
        document.head.appendChild(styleElement);
        styleSheet = styleElement.sheet;
    }

    if (styleSheet) {
        if (styleSheet.insertRule)
            styleSheet.insertRule(selector + ' {' + rules + '}', styleSheet.cssRules.length);
        else if (styleSheet.addRule)
            styleSheet.addRule(selector, rules);
    }
}

використання .cssв Jquery як$('strong').css('background','red');

$('strong').css('background','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong> Example
</strong>