Wie man CSS-Eigenschaften von HTML-Elementen ändern Javascript oder Jquery verwenden

Question

Wie kann ich CSS von javascript ändern.

Ich verwende jQuery-ui Dialog und ich mag den Stil eines DIV von Javascript ändern.

Danke

Answer 1

Schauen Sie sich die jQuery-Dokumentation . Wenn Sie etwas wollen, wird es dort sein.

Wie auch immer, wenn Sie Stile auf Elemente hinzufügen möchten, müssen Sie die css Funktion nutzen, die ein paar Varianten hat.

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

Wenn Sie also einen DIV mit der ID von „mydiv“ haben, und Sie wollen, dass der Hintergrund rot machen, würden Sie tun,

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

Der erste Weg ist einfacher, wenn man mehrere Dinge auf einmal ist Einstellung.

Wenn Sie überprüfen wollen, was für ein Objekt festgelegt ist, würden Sie eine Variante der 2. Option verwenden, lassen Sie nur den Wert.

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

Würde die var color macht red werden, wenn Sie es bereits oben angegeben, zum Beispiel.

Sie können auch Klassen hinzuzufügen und zu entfernen, wie etwas zu tun,

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

Answer 2

Diese Antwort funktioniert auch ohne jQuery.

Sie haben also so etwas wie folgt aus:

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

Wenn Sie nur einige Attribute ändern möchten, können Sie immer das Element finden mit

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

Funktion und dann die Farbe Stil angebracht ändern, indem

div.style.color = 'Green';

Erstellen der rote Text in grün statt erscheinen.

Wenn Sie die Klasse für die div in einen anderen Stil-Klasse definiert ändern möchten, können Sie dies tun:

div.className = 'bar';

machen die div jetzt Klasse Leiste verwenden, die Ihr vorher grünen Text blau macht.

Answer 3

Es gibt ein paar Möglichkeiten, Elemente Stile mit der jQuery Framework zu manipulieren. Werfen Sie einen Blick durch die Dokumentation im Zusammenhang mit CSS und Attribute ändern:

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

Answer 4

Versuchen this.This jQuery-Code ist.

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

Wenn Sie vanila Javacript verwenden, versuchen Sie dies.

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

myDiv.style.display = "block";

myDiv.style.color = "red";