Maison > interface Web > Questions et réponses frontales > Comment changer le style CSS avec jquery

Comment changer le style CSS avec jquery

PHPz
Libérer: 2023-04-23 14:30:49
original
838 Les gens l'ont consulté

Dans le développement front-end, les styles CSS sont cruciaux. CSS est utilisé pour définir la mise en page et l'apparence des éléments de la page. Parfois, nous devons modifier dynamiquement les styles CSS dans le code JavaScript. À l'heure actuelle, la méthode d'extension de jQuery peut nous aider à réaliser facilement cette fonction.

1. Présentez jQuery

Avant d'utiliser jQuery, vous devez introduire la bibliothèque jQuery en HTML. Vous pouvez télécharger la bibliothèque jQuery depuis le site officiel ou utiliser directement un CDN. Par exemple :

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Copier après la connexion

2. Sélectionnez des éléments

Dans jQuery, utilisez des sélecteurs pour sélectionner des éléments sur la page. Voici quelques sélecteurs couramment utilisés :

  1. Sélecteur de balises
$('p') // 选择所有的<p>元素
Copier après la connexion
  1. Sélecteur d'ID
$('#myId') // 选择id为"myId"的元素
Copier après la connexion
  1. Sélecteur de classe
$('.myClass') // 选择class为"myClass"的元素
Copier après la connexion
  1. Sélecteur d'attribut
$('[name="email"]') // 选择所有name属性等于"email"的元素
Copier après la connexion
  1. Sélecteur combiné
$('p, span') // 选择所有<p>和<span>元素
Copier après la connexion

3. Changer les styles CSS

Une fois les éléments sélectionnés, vous pouvez utiliser les méthodes d'extension jQuery pour modifier leurs styles CSS. Voici quelques méthodes couramment utilisées :

  1. css()

Utilisez la méthode css() pour modifier les propriétés CSS d'un élément. Par exemple, le code suivant modifiera la couleur d'arrière-plan de tous les éléments p :

$('p').css('background-color', 'yellow');
Copier après la connexion

Plusieurs propriétés CSS peuvent également être modifiées via des objets :

$('p').css({
  'background-color': 'yellow',
  'color': 'black'
});
Copier après la connexion
  1. addClass() et removeClass()

Utilisation de addClass() et removeClass( ) peut ajouter ou supprimer la classe d'un élément. Par exemple, le code suivant ajoutera la classe "red" à tous les éléments p :

$('p').addClass('red');
Copier après la connexion

Cette classe peut être définie dans la feuille de style CSS comme suit :

.red {
  color: red;
}
Copier après la connexion

Cette classe peut être supprimée à l'aide de la méthode removeClass() :

$('p').removeClass('red');
Copier après la connexion
    La méthode
  1. toggleClass()

toggleClass() peut basculer entre les classes et les éléments spécifiés. Par exemple, le code suivant ajoutera ou supprimera la classe "active" pour le bouton cliqué :

$('button').click(function() {
  $(this).toggleClass('active');
});
Copier après la connexion
  1. height() et width()

Utilisez les méthodes height() et width() pour définir la hauteur et la largeur. de l'élément. Par exemple, le code suivant définira la hauteur de tous les éléments p à 100 pixels et la largeur à 200 pixels :

$('p').height(100);
$('p').width(200);
Copier après la connexion

Ces méthodes peuvent également recevoir des fonctions de rappel afin de calculer de nouvelles valeurs de hauteur et de largeur.

Ci-dessus sont quelques méthodes d'extension jQuery courantes pour modifier les styles CSS. Grâce aux sélecteurs et à ces méthodes, nous pouvons facilement modifier dynamiquement les styles CSS dans la page pour obtenir des effets interactifs riches et une conception visuelle.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal