2012-03-08 12 views
5

La mia ricerca nella base dell'elemento HTML DOM dice questo circa qualsiasi elemento DOM "stile" di proprietà (da http://www.w3schools.com/jsref/dom_obj_all.asp):non possono cambiare il colore <label> testo

"style -- Sets or returns the style attribute of an element" 

Il tag 'label' è un elemento dom. E quindi ha una proprietà 'stile'. Come indicato sopra il collegamento w3schools , tutti gli elementi dom hanno una proprietà 'style'.

E infatti, qui sto impostando (in linea) la proprietà 'stile' di un'etichetta tag - e questo funziona bene:

<label for="itemImageId" style="color: gray" id="labelForImageUploadID">Item image</label> 

L'etichetta di colore del testo è grigio al caricamento della pagina tempo.

Sotto una determinata condizione (l'utente ha indicato che sono pronti a selezionare un'immagine da caricare) - Ho bisogno di mostrare il caricamento come 'abilitato' cambiando il colore del testo grigio iniziale di quanto sopra al nero.

So che potrei usare una classe css per il colore del testo di questa etichetta e usare la proprietà 'className' per dinamicamente alterare la classe css di quanto sopra? Ci puoi scomettere. Stasera però sto tenendo i piedi di questo elemento DOM sul fuoco. Ho solo un attributo 'style' per cambiare (colore del testo) e non voglio aggiungere una classe solo per questo - quello che sto provando qui dovrebbe funzionare secondo i documenti.

Voglio sapere perché non posso usare la proprietà 'stile' come il DOM dice che posso - "ottenere" E "impostare" le proprietà dell'elemento DOM.

Qui sto "set" -zione la proprietà 'stile' della mia - questo non fa nulla - il testo dell'etichetta rimane grigio:

document.getElementById('labelForImageUploadID').style = "color: rgb(0,0,0)"; 

Né questo cambia il colore dal grigio al nero :

document.getElementById('labelForImageUploadID').style = "color: black"; 

il codice sopra esegue (in javascript) dopo l'etichetta è già visibile sulla pagina, e in risposta a un evento onclick di un pulsante sulla forma che l'etichetta è anche una parte di.

C'è un errore nella possibilità di "impostare" la proprietà 'stile' di un elemento DOM? Secondo http://www.w3schools.com/jsref/dom_obj_all.asp,

"HTMLElement Object 

    The following properties, and methods can be used on all HTML elements." 

     (other properties here.....) 
    "style -- Sets or returns the style attribute of an element" 
     (still other properties here......) 

Allora perché non posso cambiare dell'elemento proprietà 'stile' poi nel mio codice di cui sopra?

risposta

8

Dopo aver esaminato questa risposta nel 2017, l'esempio originale di impostazione dell'intera stringa di stile funziona correttamente. Non so quale fosse il problema, ma gli esempi di seguito sono ancora approcci validi.


Impostazione di uno stile con JavaScript di solito segue il seguente formato:

document.getElementById("abc").style.[css property name in camel case] = "[value]"; 

Se si utilizza jQuery, diventa un po 'più pulito:

// find all elements with the tag name "bar" that are direct 
// descendants of an element with the class name "foo" 
$(".foo > BAR").css("color", "red"); 

// set multiple properties 
$(".foo > BAR").css({ color: "red", "background-color": "beige" }); 
+0

Grazie Tim, l'ha fatto. È vero che il W3 è un po 'rischioso qua e là. Con il tuo aiuto ho ottenuto il colore del testo della mia etichetta per rispondere correttamente, grazie anche per le altre informazioni. – wantTheBest

Problemi correlati