Come modificare le proprietà CSS di elementi HTML utilizzando JavaScript o jQuery

Question

Come posso cambiare CSS da javascript.

sto usando jQuery-ui Dialog e voglio cambiare lo stile di un DIV da javascript.

Grazie

Answer 1

jQuery documentazione . Se si desidera qualcosa che ci sarà.

In ogni caso, se si desidera aggiungere stili agli elementi, è necessario utilizzare la funzione di css, che ha un paio di varianti.

$(selector).css(properties);  // option 1
$(selector).css(name, value); // option 2

Quindi, se si dispone di un div con ID di "mydiv" e si vuole fare lo sfondo rosso, si dovrebbe fare

$("div#mydiv").css({'background-color' : 'red'}); // option 1
$("div#mydiv").css('background-color','red');     // option 2

Il primo modo è più facile se si sta impostando più cose contemporaneamente.

Se si desidera controllare ciò che un immobile è attualmente impostata, si usa una variante della seconda opzione, basta omettere il valore.

var color = $("div#mydiv").css('background-color');

renderebbe il var color essere red se già impostato in precedenza, per esempio.

È anche possibile aggiungere e rimuovere classi, facendo qualcosa di simile

$(selector).addClass(class_name);
$(selector).removeClass(class_name);

Answer 2

Questa risposta funziona anche senza jQuery.

In modo da avere qualcosa di simile:

<style type="text/css">
    .foo { color: Red; }
    .bar { color: Blue; }
</style>
<div class="foo" id="redtext"> some red text here </div>

Se si desidera modificare solo alcuni attributi, si può sempre trovare l'elemento utilizzando

var div = document.getElementById('redtext');

funzione e quindi modificare lo stile di colore attaccato da

div.style.color = 'Green';

Fare il testo rosso appaiono in verde invece.

Se si vuole cambiare la classe definita per il div a un'altra classe di stile, si può fare:

div.className = 'bar';

rendendo il div ora utilizzano bar Classe, che rende il vostro blu testo precedentemente verde.

Answer 3

Ci sono un paio di modi per manipolare gli elementi stili utilizzando il framework jQuery. Date uno sguardo attraverso la documentazione relativa agli attributi CSS e mutevoli:

• http://docs.jquery.com/Attributes/addClass#class
• http://docs.jquery.com/CSS

Answer 4

Prova this.This è codice jQuery.

 $("myDiv").css({"color":"red","display":"block"})

Se si utilizza JavaScript vaniglia, provate questo.

var myDiv = document,getElementById("myDiv");

myDiv.style.display = "block";

myDiv.style.color = "red";