Jak dodać `style = display:„ block ”` do elementu za pomocą jQuery?

Odpowiedzi:

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

Edytuj: lub, jak wskazuje Dave Thieben w swoim komentarzu poniżej, możesz to zrobić również:

$("#YourElementID").css({ display: "block" });
Colin Brock
źródło
20
lub.css({ display: "block" });
Dave Thieben
8
@dave - lub .css({ "display": "block" });po prostu zewrzeć wszelkie problemy spowodowane przez displayzmienną. - JSLint odrzuciłby wersję bez cudzysłowów. ( github.com/douglascrockford/JSLint/issues/110 )
Peter Ajtai
Przydział Jsona jest przydatny, aby wysłać go w dół rur. Podoba mi się to.
Luis Robles,
35

W zależności od celu ustawienia właściwości wyświetlania możesz chcieć rzucić okiem

$("#yourElementID").show()

i

$("#yourElementID").hide()
Projekt Adrian
źródło
27

Istnieje wiele funkcji do wykonania tej pracy, które napisano na dole na podstawie priorytetu.

Ustaw jedną lub więcej właściwości CSS dla zestawu dopasowanych elementów.

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

Wyświetl dopasowane elementy i jest w przybliżeniu odpowiednikiem wywołania.css("display", "block")

Można wyświetlić elementu stosując .show()zamiast

$("div").show()

Ustaw jeden lub więcej atrybutów dla zestawu dopasowanych elementów.

Jeśli element docelowy nie ma styleatrybutu , możesz użyć tej metody, aby dodać styl wbudowany do elementu.

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

  • JavaScript

Możesz dodać określoną właściwość CSS do elementu za pomocą czystego javascript , jeśli nie chcesz używać jQuery.

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");
Mohammad
źródło
11

Jeśli chcesz dodać wiele, możesz to zrobić w następujący sposób:

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

Jako dobrą praktykę umieszczałbym także nazwę własności między cudzysłowami, aby umożliwić myślnik, ponieważ większość stylów ma myślnik. Jeśli było to „display”, wówczas cytaty są opcjonalne, ale jeśli masz myślnik, nie będzie działał bez cudzysłowów. W każdym razie, dla uproszczenia: zawsze umieszczaj je w cudzysłowie.

Kodowanie Yoshi
źródło