Como adicionar `style = display:“ block ”` a um elemento usando jQuery?

207

Como adicionar style=display:"block"a um elemento no jQuery?

Alguém
fonte

Respostas:

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

Edit: ou como Dave Thieben aponta em seu comentário abaixo, você também pode fazer isso:

$("#YourElementID").css({ display: "block" });
Colin Brock
fonte
21
ou.css({ display: "block" });
dave thieben
8
@dave - ou .css({ "display": "block" });apenas para causar um curto-circuito em qualquer problema causado por uma displayvariável. - JSLint rejeitaria a versão sem aspas. ( github.com/douglascrockford/JSLint/issues/110 )
Peter Ajtai
A atribuição Json-esque é útil para enviá-la pelos canos. Estou gostando disso.
Luis Robles
35

Dependendo do objetivo de definir a propriedade display, você pode dar uma olhada

$("#yourElementID").show()

e

$("#yourElementID").hide()
Design by Adrian
fonte
27

Existem várias funções para fazer este trabalho que foram escritas na parte inferior com base na prioridade.

Defina uma ou mais propriedades CSS para o conjunto de elementos correspondentes.

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

Exiba os elementos correspondentes e é aproximadamente equivalente a chamar.css("display", "block")

Você pode exibir elemento usando .show()vez

$("div").show()

Defina um ou mais atributos para o conjunto de elementos correspondentes.

Se o elemento de destino não tiver styleatributo , você poderá usar este método para adicionar estilo embutido ao elemento.

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

  • Javascript

Você pode adicionar propriedades CSS específicas ao elemento usando javascript puro , se não quiser usar o 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
fonte
11

Se você precisar adicionar vários, poderá fazer o seguinte:

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

Como prática recomendada, eu também colocaria o nome da propriedade entre aspas para permitir o traço, já que a maioria dos estilos possui traços. Se fosse 'display', as aspas são opcionais, mas se você tiver um traço, ele não funcionará sem as aspas. De qualquer forma, para simplificar: sempre as coloque entre aspas.

CodificaçãoYoshi
fonte