Comment ajouter `style = display:“ block ”` à un élément en utilisant jQuery?


Réponses:


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

Edit: ou comme le souligne Dave Thieben dans son commentaire ci-dessous, vous pouvez également le faire:

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

21
ou.css({ display: "block" });
dave thieben

8
@dave - ou .css({ "display": "block" });simplement pour court-circuiter tout problème causé par une displayvariable. - JSLint rejetterait la version sans guillemets. ( github.com/douglascrockford/JSLint/issues/110 )
Peter Ajtai

L'affectation Json-esque est utile pour l'envoyer dans les tuyaux. J'aime ça.
Luis Robles

35

Selon le but de la définition de la propriété d'affichage, vous souhaiterez peut-être consulter

$("#yourElementID").show()

et

$("#yourElementID").hide()

29

Il existe plusieurs fonctions pour effectuer ce travail qui ont écrit en bas en fonction de la priorité.

Définissez une ou plusieurs propriétés CSS pour l'ensemble des éléments correspondants.

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

Afficher les éléments correspondants et équivaut à peu près à appeler.css("display", "block")

Vous pouvez afficher l'élément à la .show()place

$("div").show()

Définissez un ou plusieurs attributs pour l'ensemble des éléments correspondants.

Si l'élément cible n'a pas d' styleattribut , vous pouvez utiliser cette méthode pour ajouter un style en ligne à l'élément.

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

  • Javascript

Vous pouvez ajouter une propriété CSS spécifique à l'élément en utilisant du javascript pur , si vous ne souhaitez pas utiliser 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");

11

Si vous devez en ajouter plusieurs, vous pouvez le faire comme ceci:

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

Comme bonne pratique, je mettrais également le nom de la propriété entre guillemets pour autoriser le tiret, car la plupart des styles ont un tiret. S'il s'agissait d '«afficher», les guillemets sont facultatifs, mais si vous avez un tiret, cela ne fonctionnera pas sans les guillemets. Quoi qu'il en soit, pour faire simple: mettez-les toujours entre guillemets.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.