Voglio cambiare il tag di stile dopo aver generato il contenuto. Come posso aggiungere uno stile al tag di stile? Ho provato ad utilizzare:Come modificare dinamicamente il tag di stile utilizzando JavaScript?
document.getElementById('style').appendChild(styleContents);
, ma non ha funzionato
Probabilmente si sta tentando di aggiungere CSS al tag stile. Questo può essere realizzato utilizzando:
document.getElementsByTagName('style')[0].innerHTML=""; //some css goes here
È anche possibile utilizzare:
document.styleSheets[0].cssText = ""; //some css goes here
style è una struttura. Dopo averlo getElementById() puoi cambiare il suo style.
HTML:
<div id='myDiv'>...</div>
JS:
var div = document.getElementById('myDiv')
div.style.background = 'red';
div.style.margin = "10px";
div.style.fontSize = "12px";
ecc
Questo non è corretto. Vuole apportare modifiche al tag di stile e questo applica gli stili in linea a un div, che è irrilevante. –
Ciao Steve, anche se questo è un modo legale per assegnare i valori degli attributi, si consiglia di utilizzare le funzioni integrate per farlo. È a causa dei diversi modi di rendering di HTML e JS da parte di browser diversi. Anche io lo facevo prima, ma ho dovuto affrontare molti problemi, specialmente con IE. – Yash
Quali sono le funzioni integrate? – Ben
Perché non si utilizza la libreria jQuery e aggiungere nuovi CSS agli elementi DOM direttamente?
Ad esempio:
<script>
$(document).ready(function(){
$("#an_element").css("border", "1px solid #333");
});
</script>
<div id="an_element">Test</a>
Questo sarebbe aggiungere un bordo intorno al vostro elemento con ID "an_element".
provare questo
var currentElement = document.getElementById('style');
var currentStyle = currentElement.getAttribute('style');
var stylePieces = [];
if(currentStyle) {
stylePieces = currentStyle.split(';');
}
stylePieces.push('new-style: true;');
currentElement.setAttribute('style', stylePieces.join(';'));
Un elemento style non ha elementi figli, come il suo contenuto è, per definizione, solo il testo (per quanto HTML è interessato). Ma questo significa che puoi semplicemente aggiungere il suo contenuto usando la proprietà innerHTML. Se il vostro elemento ha <style id=foo>, allora si scrive:
document.getElementById('foo').innerHTML += styleContents;
ho gettato insieme un esempio veloce a http://jsfiddle.net/fttS5/1/.
È possibile allegare un id ai tag di stile proprio come qualsiasi altro elemento in HTML.
<style id="style"></style>
Ora si può prendere il codice si è tentato con appendChild e aggiungere un cambio rapido ad esso
document.getElementById('style').appendChild(document.createTextNode(styleContents));
Questo dovrebbe fare il trucco. In bocca al lupo.
È anche possibile utilizzare il metodo innerHTML elencato come risposta sotto il mio.
So che questa è una vecchia domanda, ma ho cercato di trovare un modo per aggiornare dinamicamente anche questi senza applicare lo stile direttamente all'elemento.
Se si assegna un identificativo di stile a un ID e lo si seleziona, è possibile accedere al relativo CSS utilizzando la proprietà del foglio.
Da qui è possibile aggiornare tutto ciò che si desidera. Sostituendo l'intero CSS all'interno del tag o aggiornando le singole classi.
document.getElementById('somestyletagid').sheet.cssRules[0].selectorText
Questo è il selettore di classe.
document.getElementById('somestyletagid').sheet.cssRules[0].style
Queste sono tutte le proprietà css individuali di quella classe.
È possibile aggiornare il colore di sfondo in questo modo:
document.getElementById('somestyletagid').sheet.cssRules[0].style.backgroundColor = 'red'
questo è un modo per accedere a qualsiasi tag di stile nel tuo html. Sfortunatamente non esiste un ID univoco per ogni CSSStyleRule che riesco a trovare. Il più vicino è il selettore. Ma ovviamente ciò può essere ripetuto. Ad ogni modo almeno per i miei bisogni questo fa esattamente quello di cui ho bisogno.
È inoltre possibile aggiornare qualsiasi file CSS incluso utilizzando document.styleSheets e accedendoli in genere nello stesso modo.
document.styleSheets[0].href
L'href del file css incluso.
document.styleSheets[0].cssRules
Tutte le classi nel foglio.
Spero che questo aiuti qualcuno!
Se si desidera aggiungere regole a un foglio di stile esistente, il metodo ufficiale da eseguire è con i metodi insertRule. Probabilmente sarà molto più semplice sul browser, quindi aggiungendo semplicemente del testo. Inoltre se lo fai come sotto, se c'è una particolare regola css non è una sintassi valida, la salterà, proteggendo così l'integrità del tuo documento.
Utilizza jQuery solo per la sincronizzazione delle stringhe, probabilmente non è necessario comunque.
Devi dargli l'ID del tag di stile.
function AddMoreStyles(code, styleTagId) {
var sheet = document.getElementById('#' + styleTagId);
let lines = code.replace(/[\r\n\t]/gm, ' ').split(/}/);
if (!sheet) {
return;
}
sheet = sheet.styleSheet || sheet.sheet || sheet;
lines.forEach(function (str) {
str = $.trim(str) + '}';
let m = str.match(/(.+?)\{(.*?)}/), m1, m2;
if (m) {
m1 = $.trim(m[1]);
m2 = $.trim(m[2]);
try {
if (sheet.insertRule) sheet.insertRule(m1 + '{' + m2 + '}', sheet.cssRules.length);
else sheet.addRule(m1, m2);
} catch (e) {
console.log("!ERROR in css rule: " + e.message);
}
}
});
};
Aggiunta sulla risposta @AtheistP3ace s', qui è una funzione che utilizza puro JavaScript per modificare il contenuto di un blocco stile:
// Change the CSS in the style section.
// Property is the name of the class or id E.G. ".mdc-card" or "#main".
// Style is the name of the CSS style. E.G. "Background".
// Value is the setting that the style will use, E.G. "Red"
// WARNING: STOPS AND EXECUTES ON THE FIRST MATCH DOES NOT PROCESS MORE AFTER THAT!!!
function changeCSS(property, style, value, cssSectionID) {
if (cssSectionID === undefined) {
cssSectionID = "mainCSS";
}
// Get the current CSS sheet.
var mainCSS = document.getElementById("mainCSS");
var changeStatus = false;
// Refine the stylesheet into a more easily processed form.
// It is done here as making it part of the variable definition produces issues where you still need to call the sheet property.
mainCSS = mainCSS.sheet;
// Only execute if the user has specified values for each of the required parameters.
if (property !== undefined && style !== undefined && value !== undefined) {
// Loop through all of the CSS Properties until the specified property is found.
for (var index = 0; index < mainCSS.cssRules.length; index++) {
// Only apply the value of the property matches.
if (mainCSS.cssRules[index].selectorText === property.toString()) {
// Apply the specified property value to the.
mainCSS.cssRules[index].style[style.toString()] = value.toString();
// Sets the exit status and breaks the loop's execution.
changeStatus = true;
break;
}
}
}
// Returns the result of the operation. True being successful and false being unsuccessful.
return changeStatus;
}
Il tag stile non si suppone che contengono elementi –
Quali sono stai cercando di fare? Modificare lo stile CSS di un elemento? – danwellman
possibile duplicato: http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript –