Come si aggiunge CSS con Javascript?

Come si aggiungono le regole CSS (ad es. strong { color: red } ) con l’uso di Javascript?

Puoi farlo anche usando le interfacce CSS DOM Level 2 ( MDN ):

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

… su tutto, ma (naturalmente) IE, che usa la propria formulazione marginalmente diversa:

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

C’è un vantaggio teorico in questo rispetto al metodo createElement-set-innerHTML, nel senso che non devi preoccuparti di inserire caratteri HTML speciali nel innerHTML, ma in pratica gli elementi di stile sono CDATA in legacy HTML e ‘<' e "&" sono usati raramente in fogli di stile comunque.

Hai bisogno di un foglio di stile in atto prima di poter iniziare ad aggiungerlo in questo modo. Può essere qualsiasi foglio di stile attivo esistente: esterno, incorporato o vuoto, non importa. Se non ce n’è uno, l’unico modo standard per crearlo al momento è con createElement.

L’approccio semplice e diretto consiste nel creare e aggiungere un nuovo nodo di style al documento.

 var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = "strong { color: red }"; document.body.appendChild(css); 

La soluzione di Ben Blank non funzionerebbe per IE8 per me.

Tuttavia questo ha funzionato 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); } 

Ecco una versione leggermente aggiornata della soluzione di Chris Herring , tenendo conto che è ansible utilizzare innerHTML e creare un nuovo nodo di testo:

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

YUI ha recentemente aggiunto un’utilità specifica per questo.

È ansible aggiungere classi o attributi di stile su base elemento per elemento.

Per esempio:

 text 

Dove potresti fare this.style.background, this.style.font-size, ecc. Puoi anche applicare uno stile usando lo stesso metodo ala

 this.className='classname'; 

Se vuoi farlo in una funzione javascript, puoi usare getElementByID piuttosto che “this”.

Questo semplice esempio di aggiungere

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 

Sorgente Stile dinamico: manipolazione di CSS con JavaScript

Versione JavaScript (ES6)

Ecco una soluzione pulita e leggibile per i browser moderni:

 const css = document.createElement( 'style' ); css.textContent = ` a { text-decoration: underline; } strong { color: red; } `; document.head.appendChild( css ); 

Nota: questa soluzione utilizza Template Literals che sono stati introdotti in ES6. Ciò consente un modo più intuitivo di aggiungere CSS.

Un’altra opzione è quella di usare JQuery per memorizzare la proprietà di stile in linea dell’elemento, aggiungervi, e quindi aggiornare la proprietà di stile dell’elemento con i nuovi valori. Come segue:

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

E poi eseguirlo con i nuovi attributi CSS come object.

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

Questo potrebbe non essere necessariamente il metodo più efficiente (sono aperto a suggerimenti su come migliorarlo :)), ma funziona sicuramente.

Questa è la mia soluzione per aggiungere una regola css alla fine dell’ultimo elenco di fogli di stile:

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

Ecco la mia funzione generica che parametrizza il selettore CSS e le regole e, facoltativamente, accetta un nome file css (sensibile alla distinzione tra maiuscole e minuscole) se si desidera aggiungere a un foglio particolare (altrimenti, se non si fornisce un nome file CSS, creerà un nuovo elemento di stile e lo aggiungerà alla testata esistente, realizzerà al massimo un nuovo elemento di stile e lo riutilizzerà per le future chiamate di funzione). Funziona con FF, Chrome e IE9 + (forse anche prima, non testati).

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

usa .css in Jquery come $('strong').css('background','red');

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

Ecco un esempio di modello per aiutarti a iniziare

Richiede 0 librerie e usa solo javascript per iniettare sia HTML che CSS.

La funzione è stata presa in prestito dall’utente @Husky sopra

Utile se si desidera eseguire uno script tampermonkey e si desidera aggiungere una sovrapposizione su un sito Web (ad esempio un’app nota, ad esempio)

 // INJECTING THE HTML document.querySelector('body').innerHTML += '
Hello World
'; // CSS INJECTION FUNCTION //https://stackoverflow.com/questions/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;}" )