Hinzufügen und Entfernen von Stilattributen aus div mit jquery

103

Ich habe ein Projekt geerbt, an dem ich arbeite, und ich aktualisiere einige jquery-Animationen (sehr wenig Übung mit jquery).

Ich habe ein Div, zu dem ich das Stilattribut hinzufügen und entfernen muss. Hier ist der div:

<div id='voltaic_holder'>

An einer Stelle in der Animation muss ich einen Stil hinzufügen:

<div id='voltaic_holder' style='position:absolute;top:-75px'>

Ich habe mich umgesehen und die .removeAttr()Methode gefunden , aber ich kann nicht sehen, wie ich sie oder sogar entfernte Teile davon hinzufügen soll (wie oben: nur -75px).

Vielen Dank,

jquery css dhtml

— Es ist ausgesprochen
quelle

$('voltaic_holder').style = nullvielleicht? Stile haben ihren eigenen Objektbaum. Die meisten anderen Attribute sind nur Daten vom Typ key = value.

— Marc B

246

Sie können Folgendes tun

Legen Sie jede Stileigenschaft einzeln fest:

$("#voltaic_holder").css("position", "relative");

Legen Sie mehrere Stileigenschaften gleichzeitig fest:

$("#voltaic_holder").css({"position":"relative", "top":"-75px"});

Entfernen Sie einen bestimmten Stil:

$("#voltaic_holder").css({"top": ""});
// or
$("#voltaic_holder").css("top", "");

Entfernen Sie das gesamte Stilattribut:

$("#voltaic_holder").removeAttr("style")

— Adam Albrecht
quelle

Kann ich mehr als 1 CSS-Eigenschaft pro Zeile hinzufügen? Oder muss ich eine für jede $("#voltaic_holder").css("position", "relative"); $("#voltaic_holder").css("top", "-75");

— Stileigenschaft

3

Um das zu beantworten, können Sie ja. Verwenden Sie einfach ein Objektliteral für die Funktion .css (). Wie $ ('foo'). CSS ({'height': '30px', 'width': '50px'});

— Richard Neil Ilagan

@AdamAlbrecht Wie kann ich einen bestimmten Stil entfernen, den ich hinzugefügt habe, weil in $ ("# voltaic_holder"). RemoveAttr ("style") alle angewendeten Stile entfernt werden, die standardmäßig neu hinzugefügt wurden.

— 3 Regeln

21

Gehen Sie folgendermaßen vor, um das Stilattribut des voltaic_holderBereichs vollständig zu entfernen :

$("#voltaic_holder").removeAttr("style");

Gehen Sie folgendermaßen vor, um ein Attribut hinzuzufügen:

$("#voltaic_holder").attr("attribute you want to add", "value you want to assign to attribute");

Gehen Sie folgendermaßen vor, um nur den oberen Stil zu entfernen:

$("#voltaic_holder").css("top", "");

— Peter Olson
quelle

15

Wenn Sie jQuery verwenden, verwenden CSS CSS hinzufügen

$("#voltaic_holder").css({'position': 'absolute',
    'top': '-75px'});

So entfernen Sie CSS-Attribute

$("#voltaic_holder").css({'position': '',
    'top': ''});

— justkt
quelle

Sie können das Attribut position oder top nicht aus dem Element voltaic_holder entfernen, da es diese Attribute nicht enthält. Dies sind CSS-Eigenschaften, die im Stilattribut definiert sind.

— Peter Olson

@ Peter - doh! Bearbeitet, um zu verwenden.css

— justkt

10

Der einfache Weg, dies zu handhaben (und die beste HTML-Lösung zum Booten), besteht darin, Klassen einzurichten, die die Stile haben, die Sie verwenden möchten. Dann ist es einfach, addClass () und removeClass () oder sogar toggleClass () zu verwenden .

$('#voltaic_holder').addClass('shiny').removeClass('dull');

oder auch

$('#voltaic_holder').toggleClass('shiny dull');

— Surreale Träume
quelle

2

Hier finden Sie Informationen zum dynamischen Hinzufügen eines Stils für die Textausrichtung mithilfe von jQuery

— Das Pferd
quelle

2

Bei der .css- Methode in jQuery für ! Gilt die wichtige Regel nicht.

In diesem Fall sollten wir die .attr- Funktion verwenden.

Zum Beispiel: Wenn Sie den folgenden Stil hinzufügen möchten:

<div id='voltaic_holder' style='position:absolute;top:-75px !important'>

Du solltest benutzen:

$("#voltaic_holder").attr("style", "position:absolute;top:-75px !important");

Hoffe es hilft jemandem.

— Adiyya Tadikamalla
quelle

1

Entfernen Sie das Stilattribut mit der J-Abfrage aus div:

$("#TableDiv").removeAttr("style");

Hinzufügen eines Stils zu div mithilfe der J-Abfrage:

$("#TableDiv").attr("style", "display: none;");

Stil mit HTML hinzufügen:

<div class="row" id="TableDiv" style="display: none;">
</div>

Hoffe es wird hilfreich :)

— Wajid Khan
quelle