aggiungere dinamicamente css alla pagina tramite javascript

Question

Sto facendo un widget che verrà aggiunto a siti esterni, e ho fatto una pagina che genera css per loro per disegnarlo (colore del testo, colore di sfondo, dimensione dei caratteri, etc) . Finisco con una textarea piena di css per loro di copiare/incollare sul loro sito web.

Esiste un modo per aggiungere questo css alla pagina corrente in modo da avere un'anteprima in tempo reale?

Answer 1

si può aggiungere un tag style al DOM, con il contenuto del testo-zona in esso? Potresti dargli un id in modo da poterlo cambiare in seguito.

Answer 2

vi consiglio di iniziare a utilizzare un quadro decente per il vostro sviluppo web/JavaScript, personalmente mi piacerebbe andare con jQuery.

http://api.jquery.com/css/ 

Qui ci sono alcuni frammenti di codice che mostrano come impostare rapidamente le proprietà CSS per gli elementi.

Answer 3

mi hanno tradizionalmente aggiunto un blocco <style> quando facendo elementi.

var style_rules = []; 

style_rules.push("#" + myElemId + " { /* Rules */ } "); 
/* ... */ 

var style = '<style type="text/css">' + style_rules.join("\n") + "</style>"; 
$("head").append(style); 

Una cosa importante da notare è che, perché non sai quello che qualsiasi degli stili esistenti è, o ciò id 's potrebbero entrare in conflitto sulla pagina, è molto utile per tenere traccia dei tuoi id all'interno della vostra Applicazione JavaScript, quindi utilizzando quelli per popolare il blocco <style> immesso. Ho anche tendono a correre i miei nomi attraverso una funzione di prefisso per garantire che i nomi generici di wrapper, e unit non siano in conflitto (si trasformano in qualcosa di simile myunique_wrapper e myunique_unit.

che incorpora un reset CSS di base come #myWrapper {margin: 0; padding: 0} può essere un piattaforma di partenza decente per la creazione di stili personalizzati

Indirizzando il tuo caso univoco, un'anteprima dal vivo per così dire, designerei un div con elementi standard, quindi quando fanno clic su "aggiorna" leggi le regole e aggiungili a Se si desidera annullare tutti gli effetti residui delle regole passate, è possibile rimuovere l'ultimo elemento <style> o meglio ancora dare il proprio <style> elemento un id. Non sono sicuro che questo tipo di selezione possa funzionare, ma dovrebbe.

Answer 4

se si desidera aggiungere del testo css

var style = document.createElement('style'); 
style.type = 'text/css'; 
style.innerHTML = 'content'; 
document.getElementsByTagName('head')[0].appendChild(style); 

se si desidera aggiungere file css

var link = document.createElement('link'); 
link.setAttribute('rel', 'stylesheet'); 
link.setAttribute('type', 'text/css'); 
link.setAttribute('href', 'css/my.css'); 
document.getElementsByTagName('head')[0].appendChild(link); 

Answer 5

var element = document.createElement('style'); 
element.setAttribute('type', 'text/css'); 

if ('textContent' in element) { 
    element.textContent = css; 
} else { 
    element.styleSheet.cssText = css; 
} 

document.getElementsByTagName('head')[0].appendChild(element);