Wie füge ich einem Element mit jQuery `style = display:“ block ”` hinzu?


Antworten:


345
$("#YourElementID").css("display","block");

Edit: oder wie Dave Thieben in seinem Kommentar unten ausführt, können Sie dies auch tun:

$("#YourElementID").css({ display: "block" });

20
oder.css({ display: "block" });
Dave Thieben

8
@dave - oder .css({ "display": "block" });nur um Probleme, die durch eine displayVariable verursacht werden, kurzzuschließen . - JSLint würde die Version ohne Anführungszeichen ablehnen. ( github.com/douglascrockford/JSLint/issues/110 )
Peter Ajtai

Die Json-ähnliche Zuordnung ist nützlich, um sie über die Rohre zu senden. Ich mag das.
Luis Robles

35

Abhängig vom Zweck des Festlegens der Anzeigeeigenschaft möchten Sie möglicherweise einen Blick darauf werfen

$("#yourElementID").show()

und

$("#yourElementID").hide()

27

Es gibt mehrere Funktionen für diese Arbeit, die je nach Priorität unten geschrieben wurden.

Legen Sie eine oder mehrere CSS-Eigenschaften für den Satz übereinstimmender Elemente fest.

$("div").css("display", "block")
// Or add multiple CSS properties
$("div").css({
  display: "block",
  color: "red",
  ...
})

Zeigen Sie die übereinstimmenden Elemente an und entsprechen Sie in etwa dem Aufruf.css("display", "block")

Sie können das Element .show()stattdessen mit anzeigen

$("div").show()

Legen Sie ein oder mehrere Attribute für den Satz übereinstimmender Elemente fest.

Wenn das Zielelement kein styleAttribut hat , können Sie mit dieser Methode dem Element einen Inline-Stil hinzufügen.

$("div").attr("style", "display:block")
// Or add multiple CSS properties
$("div").attr("style", "display:block; color:red")

  • JavaScript

Sie können dem Element mit reinem Javascript eine bestimmte CSS-Eigenschaft hinzufügen , wenn Sie jQuery nicht verwenden möchten.

var div = document.querySelector("div");
// One property
div.style.display = "block";
// Multiple properties
div.style.cssText = "display:block; color:red"; 
// Multiple properties
div.setAttribute("style", "display:block; color:red");

11

Wenn Sie mehrere hinzufügen müssen, können Sie dies folgendermaßen tun:

$('#element').css({
    'margin-left': '5px',
    'margin-bottom': '-4px',
    //... and so on
});

Als gute Vorgehensweise würde ich auch den Eigenschaftsnamen zwischen Anführungszeichen setzen, um den Bindestrich zuzulassen, da die meisten Stile einen Bindestrich enthalten. Wenn es "Anzeige" war, sind Anführungszeichen optional, aber wenn Sie einen Bindestrich haben, funktioniert es ohne die Anführungszeichen nicht. Um es einfach zu machen: Fügen Sie sie immer in Anführungszeichen ein.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.