Applicare i CSS dinamicamente con JavaScript

Question

Qual è un buon modo per applicare lo stile dinamicamente (vale a dire il valore degli stili creati in fase di esecuzione) agli elementi HTML con JavaScript?

Sto cercando un modo per impacchettare un widget JavaScript (JS, CSS e markup) in un singolo componente (in pratica, un oggetto). L'idea sarebbe che il componente incapsulasse lo stile (quindi gli utenti hanno una buona API per modificarlo invece di un approccio più strettamente connesso alla modifica diretta del CSS e all'applicazione di modifiche indirette). Il problema è che una singola chiamata API potrebbe implicare modifiche a diversi elementi di stile.

Il modo in cui lo farei è costruire il CSS e impostare lo style atrribute agli elementi corretti (molto probabilmente usando l'ID per evitare di applicare le modifiche ad altre aree del markup). Questa è una buona soluzione? C'è un modo migliore per farlo?

Answer 1

Il modo in cui lo farei è di costruire il CSS e impostare l'attributo di stile sugli elementi corretti. Per esempio:

var div = document.createElement('div'); 
div.setAttribute("style", "color: blue, margin-top:5px"); 
document.body.appendChild(div); 

Questo codice creerà un nuovo elemento div con lo stile color: blue, margin-top:5px e aggiungerlo alla pagina.

Answer 2

utilizzando jQuery

Utilizzare la funzione css() per applicare lo stile di elementi esistenti in cui si passa un oggetto stili che contengono:

var styles = { 
    backgroundColor : "#ddd", 
    fontWeight: "" 
}; 
$("#myId").css(styles); 

È inoltre possibile applicare uno stile al tempo con:

$("#myId").css("border-color", "#FFFFFF"); 

Vanil La JS:

var myDiv = document.getElementById("#myId"); 
myDiv.setAttribute("style", "border-color:#FFFFFF;"); 

con i CSS:

È inoltre possibile utilizzare un file CSS separato contenente i diversi stili necessari all'interno delle classi, e in funzione del contesto di aggiungere o rimuovere quelle classi per gli elementi .

nel vostro file CSS è possibile avere classi come

.myClass { 
    background-color: red; 
} 

.myOtherClass { 
    background-color: blue; 
} 

Anche in questo caso utilizzando jQuery, per aggiungere o rimuovere una classe ad un elemento, è possibile utilizzare

$("#myDiv").addClass('myClass'); 

o

$("#myDiv").removeClass('myClass'); 

Penso che questo sia un modo più pulito in quanto separa il tuo stile dalla tua logica. Ma se i valori del tuo css dipendono da ciò che viene restituito dal server, questa soluzione potrebbe essere difficile da applicare.

Answer 3

Potrei interpretare male la tua domanda, ma sembra che tu stia chiedendo un modello architettonico semplice. Vuoi qualcosa che renda più facile per qualcuno che usa il tuo widget modificarlo secondo le loro specifiche?

Se questo è il caso, quindi non conosco alcun modello speciale per farlo senza usare CSS.

Posso dirti che i "widget" che ho trovato più facili da usare hanno file CSS separati. Ho trovato abbastanza semplice modificarli alle mie esigenze. Penso che questo sia dovuto al fatto che la struttura dell'utilizzo di CSS con HTML e Javascript è già un modello semplice e piacevole. Non so se c'è qualcosa di meglio, soprattutto considerando che le persone conoscono già molto bene la relazione HTML/CSS.