Comment changer les styles CSS à l'aide de JQuery

JQuery est actuellement l'une des bibliothèques JavaScript les plus populaires, ce qui permet aux développeurs d'exploiter plus facilement les pages HTML. L'une des fonctions les plus basiques et les plus couramment utilisées consiste à utiliser JQuery pour modifier les styles CSS.

1. La syntaxe de base de JQuery pour changer le style CSS

Dans JQuery, nous utilisons la méthode .css() pour changer le style CSS de l'élément La syntaxe est la suivante :

$(selector).css(property,value)

Parmi eux, le sélecteur est. l'élément qui doit être modifié, et property est l'élément qui doit être modifié, la propriété CSS, value est la nouvelle valeur de la propriété. Par exemple, nous pouvons changer la couleur de fond de l'élément en rouge :

$("#myDiv").css("background-color", "red");

2. Comment changer le style CSS avec JQuery

1. Changer directement la valeur de la propriété CSS

Nous pouvons définir directement la valeur de la propriété CSS à une nouvelle valeur par l’implémentation de la méthode .css(). Par exemple, définissez la couleur de la police sur bleu :

$("#myDiv").css("color", "blue");

Remarque : La méthode css() modifiera uniquement le style en ligne de l'élément spécifié (c'est-à-dire le style écrit dans la balise element) et n'affectera pas les règles de la feuille de style externe.

2. Changer de classe CSS

Nous pouvons utiliser la méthode .addClass() pour ajouter une classe CSS à un élément et la méthode .removeClass() pour supprimer une classe CSS. L'exemple suivant montre comment cliquer sur un bouton pour basculer la classe d'un div :

$("#btnToggle").click(function(){
  $("#myDiv").toggleClass("active");
});

La méthode .toggleClass() ajoutera ou supprimera le nom de classe spécifié.

3. Définir plusieurs propriétés CSS

Nous pouvons définir plusieurs propriétés et valeurs CSS à la fois, il suffit de transmettre un objet dans la méthode .css(). Par exemple, définissez simultanément la bordure, la largeur, la hauteur et le remplissage sur la même valeur :

$("#myDiv").css({
  "border": "1px solid #000",
  "width": "50px",
  "height": "50px",
  "padding": "10px"
});

4. Obtenez la valeur de la propriété CSS

Nous pouvons utiliser la méthode .css() pour obtenir la valeur de la propriété CSS du élément spécifié. Par exemple, obtenez la couleur d'arrière-plan d'un élément :

var backgroundColor = $("#myDiv").css("background-color");

Grâce à la méthode .css(), nous pouvons modifier et obtenir de manière flexible le style CSS des éléments de la page pour obtenir des effets d'interaction utilisateur plus riches.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!