Wie fügt man CSS mit Javascript hinzu?

Wie fügt man CSS-Regeln (zB strong { color: red }) mithilfe von Javascript hinzu?

Sie können dies auch über DOM Level 2 CSS-Schnittstellen ( MDN ) tun :

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

... auf allen außer (natürlich) IE8 und früheren Versionen, die ihre eigenen geringfügig unterschiedlichen Formulierungen verwenden:

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

Dies hat einen theoretischen Vorteil gegenüber der Methode createElement-set-innerHTML, da Sie sich keine Gedanken über das Einfügen spezieller HTML-Zeichen in innerHTML machen müssen, aber in der Praxis sind Stilelemente CDATA in Legacy-HTML und '<' und '&' werden in Stylesheets sowieso selten verwendet.

Sie benötigen ein Stylesheet, bevor Sie es wie folgt anhängen können. Das kann jedes vorhandene aktive Stylesheet sein: extern, eingebettet oder leer, es spielt keine Rolle. Wenn es keine gibt, ist die einzige Standardmethode, um sie zu erstellen, derzeit createElement.

Der einfache und direkte Ansatz besteht darin, einen neuen styleKnoten zu erstellen und dem Dokument hinzuzufügen .

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

Die Lösung von Ben Blank würde in IE8 für mich nicht funktionieren.

Dies funktionierte jedoch in 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);
}

Hier ist eine leicht aktualisierte Version der Lösung von Chris Herring , die berücksichtigt, dass Sie sie auch verwenden können, innerHTMLanstatt einen neuen Textknoten zu erstellen:

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

Kürzester Einzeiler

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

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

Sie können Klassen oder Stilattribute Element für Element hinzufügen.

Beispielsweise:

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

Wo können Sie this.style.background, this.style.font-size usw. ausführen? Sie können einen Stil auch mit derselben Methode anwenden

this.className='classname';

Wenn Sie dies in einer Javascript-Funktion tun möchten, können Sie getElementByID anstelle von 'this' verwenden.

Dieses einfache Beispiel für das Hinzufügen <style>von HTML-Kopf

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

Quelle Dynamische Stil - Manipulation von CSS mit JavaScript

YUI hat kürzlich ein spezielles Dienstprogramm hinzugefügt . Siehe stylesheet.js hier.

Dies ist meine Lösung, um eine CSS-Regel am Ende der letzten Stylesheet-Liste hinzuzufügen:

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

Eine andere Option besteht darin, JQuery zu verwenden, um die Inline-Stileigenschaft des Elements zu speichern, an sie anzuhängen und dann die Stileigenschaft des Elements mit den neuen Werten zu aktualisieren. Wie folgt:

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

Führen Sie es dann mit den neuen CSS-Attributen als Objekt aus.

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

Dies ist möglicherweise nicht unbedingt die effizienteste Methode (ich bin offen für Vorschläge, wie dies verbessert werden kann. :)), aber es funktioniert definitiv.

Hier ist eine Beispielvorlage, die Ihnen den Einstieg erleichtert

Benötigt 0 Bibliotheken und verwendet nur Javascript, um sowohl HTML als auch CSS einzufügen.

Die Funktion wurde vom Benutzer @Husky oben ausgeliehen

Nützlich, wenn Sie ein Tampermonkey-Skript ausführen und einer Website ein Umschalt-Overlay hinzufügen möchten (z. B. eine Notiz-App).

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

Wenn Sie wissen, dass mindestens ein <style>Tag auf der Seite vorhanden ist, verwenden Sie diese Funktion:

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

Verwendung :

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

Hier ist meine Allzweckfunktion, die den CSS-Selektor und die Regeln parametrisiert und optional einen CSS-Dateinamen (Groß- und Kleinschreibung beachten) verwendet, wenn Sie stattdessen einem bestimmten Blatt hinzufügen möchten (andernfalls, wenn Sie keinen CSS-Dateinamen angeben, diesen erstellt ein neues Stilelement und hängt es an den vorhandenen Kopf an. Es erstellt höchstens ein neues Stilelement und verwendet es bei zukünftigen Funktionsaufrufen wieder. Funktioniert mit FF, Chrome und IE9 + (möglicherweise auch früher, ungetestet).

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

Verwendung .cssin Jquery wie$('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>