web-dev-qa-db-fra.com

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

Comment ajouter style=display:"block" à un élément dans jQuery?

javascriptjqueryhtmlcss
187
Someone
$("#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" });
317
Colin Brock

Selon le but de la définition de la propriété display, vous pouvez jeter un oeil à

$("#yourElementID").show()

et

$("#yourElementID").hide()
30
Design by Adrian

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",
  ...
})


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

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

$("div").show()


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

Si l'élément cible n'a pas l'attribut style, 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 à un é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");
16
Mohammad

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 voudrais également mettre le nom de la propriété entre guillemets pour permettre le tiret, car la plupart des styles ont un tiret. Si elle était 'display', les guillemets sont facultatifs, mais si vous avez un tiret, cela ne fonctionnera pas sans les guillemets. Quoi qu'il en soit, pour simplifier les choses: mettez-les toujours entre guillemets.

10
CodingYoshi