jQuery ändert die CSS-Klasse in div

Wenn ich zum Beispiel ein div-Element habe und die Klasse „first“ mit vielen CSS-Eigenschaften definiert ist. Kann ich die CSS-Klasse ‘zweite’ zuweisen, die auch viele Eigenschaften hat, die diesem div nur bei einem Ereignis unterschiedlich definiert sind, ohne jede Eigenschaft in Zeile zu schreiben.

Ja, leicht.

$("#mydiv").attr("class", "second");

$(".first").addClass("second");

Wenn Sie es zu einer Veranstaltung hinzufügen möchten, können Sie dies ebenfalls ganz einfach tun. Ein Beispiel mit dem Click-Event:

$(".first").click(function() {
    $(this).addClass("second");
});

Sie können Klassen mit jQuery wie folgt hinzufügen und entfernen:

$(".first").addClass("second")
// remove a class
$(".first").removeClass("second")

Übrigens können Sie in Ihrem Markup gleich mehrere Klassen getrennt mit einem Whitespace setzen

<div class="second first"></div>

Dies ist möglicherweise nicht ganz zielführend, da mir nicht ganz klar ist, was Sie tun möchten. Angenommen, Sie möchten einem div als Reaktion auf ein Ereignis eine andere Klasse zuweisen, dann lautet die Antwort ja, Sie können dies sicherlich mit jQuery tun. Ich bin nur ein jQuery-Anfänger, aber ich habe Folgendes in meinem Code verwendet:

$(document).ready(function() {
    $("#someElementID").click(function() {  // this is your event
        $("#divID").addClass("second");     // here your adding the new class
    )}; 
)};

Wenn Sie die erste Klasse durch die zweite Klasse ersetzen möchten, würden Sie meiner Meinung nach zuerst removeClass und dann addClass verwenden, wie ich es oben getan habe. toggleClass kann auch einen Blick wert sein. Die jQuery-Dokumentation ist für diese Art von Änderungen gut geschrieben, mit Beispielen.

Jemand anderes kann eine bessere Option haben, aber ich hoffe, das hilft!

Ein HTML-Element wie div kann mehr als eine Klasse haben. Angenommen, div werden mit der addClass-Methode zwei Stile zugewiesen. Wenn style1 3 Eigenschaften wie Schriftgröße, Gewicht und Farbe hat und style2 4 Eigenschaften wie Schriftgröße, Gewicht, Farbe und Hintergrundfarbe hat, hat der resultierende effektive Eigenschaftensatz (Stil) meiner Meinung nach 4 Eigenschaften dh union aller Stilrichtungen. Gemeinsame Eigenschaften, in unserem Fall Farbe, Schriftgröße, Gewicht, werden mit den neuesten Werten einmal vorkommen. Wenn div zuerst style1 und dann style2 zugewiesen wird, werden die gemeinsamen Eigenschaften durch style2-Werte überschrieben.

Weiter habe ich einen Beitrag unter geschrieben Verwenden von JQuery zum Anwenden, Entfernen und Verwalten von StilenIch hoffe es hilft dir

Grüße Awais

$(document).ready(function () {

            $("#divId").toggleClass('cssclassname'); // toggle class
});

**OR**

$(document).ready(function() {
        $("#objectId").click(function() {  // click or other event to change the div class
                $("#divId").toggleClass("cssclassname");     // toggle class
        )}; 
)};