Jak dodać CSS z Javascriptem?

Jak dodać reguły CSS (np. strong { color: red }) Za pomocą JavaScript?

Możesz to również zrobić za pomocą interfejsów DOM Level 2 CSS ( MDN ):

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

... we wszystkich oprócz (naturalnie) IE8 i wcześniejszych, które używają własnego marginalnie innego sformułowania:

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

Jest to teoretyczna zaleta w porównaniu z metodą createElement-set-innerHTML polegającą na tym, że nie musisz martwić się o umieszczanie specjalnych znaków HTML w innerHTML, ale w praktyce elementami stylu są CDATA w starszym HTML i '<' i „&” są i tak rzadko używane w arkuszach stylów.

Musisz mieć arkusz stylów na miejscu, zanim będziesz mógł zacząć dodawać do niego w ten sposób. Może to być dowolny istniejący aktywny arkusz stylów: zewnętrzny, osadzony lub pusty, to nie ma znaczenia. Jeśli takiego nie ma, jedynym standardowym sposobem jego utworzenia jest w tej chwili createElement.

Prostym i bezpośrednim podejściem jest utworzenie i dodanie nowego stylewęzła do dokumentu.

// 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)

Rozwiązanie autorstwa Bena Blanka nie działałoby dla mnie w IE8.

Jednak to zadziałało w 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);
}

Oto nieco zaktualizowana wersja rozwiązania Chrisa Herringa , biorąc pod uwagę, że możesz również użyć innerHTMLzamiast tworzenia nowego węzła tekstowego:

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

Najkrótsza jedna wkładka

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

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

Możesz dodawać klasy lub atrybuty stylu element po elemencie.

Na przykład:

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

Gdzie możesz to zrobić.style.background, this.style.font-size, itp. Możesz również zastosować styl używając tej samej metody ala

this.className='classname';

Jeśli chcesz to zrobić w funkcji javascript, możesz użyć metody getElementByID zamiast „this”.

Ten prosty przykład dodania <style>nagłówka 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

Styl dynamiczny źródła - manipulowanie CSS za pomocą JavaScript

YUI niedawno dodał narzędzie specjalnie do tego celu. Zobacz stylesheet.js tutaj.

Oto moje rozwiązanie, aby dodać regułę css na końcu ostatniej listy arkuszy stylów:

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

Inną opcją jest użycie JQuery do przechowywania właściwości stylu wbudowanego elementu, dołączenie do niej, a następnie zaktualizowanie właściwości style elementu o nowe wartości. Następująco:

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

Następnie wykonaj go z nowymi atrybutami CSS jako obiektem.

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

Może to niekoniecznie najskuteczniejsza metoda (jestem otwarty na sugestie, jak to poprawić. :)), ale zdecydowanie działa.

Oto przykładowy szablon, który pomoże Ci rozpocząć

Wymaga bibliotek 0 i używa tylko javascript do wstrzykiwania HTML i CSS.

Funkcja została zapożyczona od użytkownika @Husky powyżej

Przydatne, jeśli chcesz uruchomić skrypt tampermonkey i chcesz dodać nakładkę przełączającą na stronie internetowej (np. Aplikację do notatek)

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

jeśli wiesz, że na <style>stronie istnieje co najmniej jeden tag, użyj tej funkcji:

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

stosowanie :

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

Oto moja funkcja ogólnego przeznaczenia, która parametryzuje selektor CSS i reguły oraz opcjonalnie przyjmuje nazwę pliku css (z uwzględnieniem wielkości liter), jeśli zamiast tego chcesz dodać do konkretnego arkusza (w przeciwnym razie, jeśli nie podasz nazwy pliku CSS, utworzy nowy element stylu i dołączy go do istniejącej nagłówka. Stworzy co najwyżej jeden nowy element stylu i użyje go ponownie w przyszłych wywołaniach funkcji). Działa z FF, Chrome i IE9 + (może też wcześniej, nieprzetestowane).

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

używać .cssw Jquery, takich jak$('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>