¿Cómo agregar `style = display:“ block ”` a un elemento usando jQuery?

Respuestas:

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

Editar: o como dave thieben señala en su comentario a continuación, también puede hacer esto:

$("#YourElementID").css({ display: "block" });
Colin Brock
fuente
21
o.css({ display: "block" });
dave thieben
8
@dave - o .css({ "display": "block" });simplemente para cortocircuitar cualquier problema causado por una displayvariable. - JSLint rechazaría la versión sin comillas. ( github.com/douglascrockford/JSLint/issues/110 )
Peter Ajtai
La tarea Json-esque es útil para enviarla por las tuberías. Me gusta esto
Luis Robles
35

Dependiendo del propósito de establecer la propiedad de visualización, es posible que desee echar un vistazo a

$("#yourElementID").show()

y

$("#yourElementID").hide()
Diseño por Adrian
fuente
29

Hay múltiples funciones para hacer este trabajo que escribieron en la parte inferior según la prioridad.

Establezca una o más propiedades CSS para el conjunto de elementos coincidentes.

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

Muestra los elementos coincidentes y es más o menos equivalente a llamar.css("display", "block")

Puede mostrar el elemento usando en su .show()lugar

$("div").show()

Establezca uno o más atributos para el conjunto de elementos coincidentes.

Si el elemento de destino no tiene styleatributo , puede usar este método para agregar estilo en línea al elemento.

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

  • JavaScript

Puede agregar una propiedad CSS específica al elemento usando JavaScript puro , si no desea usar 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
fuente
11

Si necesita agregar múltiples, puede hacerlo así:

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

Como buena práctica, también pondría el nombre de la propiedad entre comillas para permitir el guión, ya que la mayoría de los estilos tienen un guión en ellos. Si fue 'mostrar', las comillas son opcionales, pero si tiene un guión, no funcionará sin las comillas. De todos modos, para simplificarlo: enciérrelos siempre entre comillas.

CodificaciónYoshi
fuente