¿Cómo se agrega CSS con Javascript?

¿Cómo se agregan reglas CSS (por ejemplo strong { color: red }) mediante el uso de Javascript?

También puede hacerlo utilizando las interfaces CSS de nivel 2 DOM ( MDN ):

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

... en todos menos (naturalmente) IE8 y anteriores, que utilizan su propia redacción marginalmente diferente:

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

Hay una ventaja teórica en esto en comparación con el método createElement-set-innerHTML, en que no tiene que preocuparse por poner caracteres HTML especiales en innerHTML, pero en la práctica los elementos de estilo son CDATA en HTML heredado y '<' y '&' rara vez se usan en hojas de estilo de todos modos.

Necesita una hoja de estilo en su lugar antes de que pueda comenzar a agregarla de esta manera. Puede ser cualquier hoja de estilo activa existente: externa, incrustada o vacía, no importa. Si no hay uno, la única forma estándar de crearlo en este momento es con createElement.

El enfoque simple y directo es crear y agregar un nuevo stylenodo al documento.

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

La solución de Ben Blank no funcionaría en IE8 para mí.

Sin embargo, esto funcionó en 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);
}

Aquí hay una versión ligeramente actualizada de la solución de Chris Herring , teniendo en cuenta que también puede usarla innerHTMLen lugar de crear un nuevo nodo de texto:

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

El más corto One Liner

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

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

Puede agregar clases o atributos de estilo elemento por elemento.

Por ejemplo:

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

Dónde podría hacer this.style.background, this.style.font-size, etc. También puede aplicar un estilo usando este mismo método ala

this.className='classname';

Si desea hacer esto en una función de JavaScript, puede usar getElementByID en lugar de 'this'.

Este sencillo ejemplo de add <style>in head of 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

Estilo dinámico de origen : manipulación de CSS con JavaScript

Recientemente, YUI agregó una utilidad específicamente para esto. Ver stylesheet.js aquí.

Esta es mi solución para agregar una regla css al final de la última lista de hojas de estilo:

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

Otra opción es usar JQuery para almacenar la propiedad de estilo en línea del elemento, agregarla y luego actualizar la propiedad de estilo del elemento con los nuevos valores. Como sigue:

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

Y luego ejecútelo con los nuevos atributos CSS como un objeto.

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

Este puede no ser necesariamente el método más eficiente (estoy abierto a sugerencias sobre cómo mejorar esto. :)), pero definitivamente funciona.

Aquí hay una plantilla de muestra para ayudarlo a comenzar

Requiere 0 bibliotecas y usa solo javascript para inyectar tanto HTML como CSS.

La función fue prestada del usuario @Husky arriba

Útil si desea ejecutar un script de tampermonkey y desea agregar una superposición de alternar en un sitio web (por ejemplo, una aplicación de notas, por ejemplo)

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

Si sabe que <style>existe al menos una etiqueta en la página, use esta función:

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

uso:

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

Aquí está mi función de propósito general que parametriza el selector CSS y las reglas, y opcionalmente toma un nombre de archivo css (distingue entre mayúsculas y minúsculas) si desea agregar a una hoja en particular (de lo contrario, si no proporciona un nombre de archivo CSS, se creará un nuevo elemento de estilo y lo agregará al encabezado existente. Creará como máximo un nuevo elemento de estilo y lo reutilizará en futuras llamadas a funciones). Funciona con FF, Chrome e IE9 + (quizás también antes, sin probar).

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

utilizar .cssen Jquery como$('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>