Comment modifier dynamiquement le style CSS avec jquery

Méthodes permettant à jquery de modifier dynamiquement les styles CSS : 1. Modifier dynamiquement les styles CSS via des méthodes CSS ; 2. Définir un style CSS pour l'élément HTML spécifié ; 3. Afficher le style CSS de l'élément ; autre élément HTML spécifié.

L'environnement d'exploitation de cet article : système Windows 7, jquery version 3.2.1, ordinateur Dell G3.

jquery implémente une méthode de changement dynamique des styles CSS.

Les détails sont les suivants :

jquery est presque devenue la bibliothèque JS standard pour développer des applications WEB, indissociable de sa simplicité et de sa facilité d'utilisation. En tant que développeur back-end, lors de la création de certaines pages front-end, le contrôle du style CSS est indispensable et doit être maîtrisé. S'il s'agit d'un CSS statique, bien sûr, il peut être écrit directement, mais certaines interfaces nécessitent des effets dynamiques, tels que des changements de couleur, des changements de taille de police, et même des p cachés dans la réalité, etc. Tout cela nécessite du javascript pour contrôler dynamiquement leurs styles CSS. , ce qui suit est un résumé des méthodes jquery couramment utilisées pour contrôler les styles CSS

1 Changer le style des hyperliens
2 Donnez un style CSS spécifié à l'élément html spécifié
3.
4. Masquer l'affichage p ou d'autres éléments HTML spécifiés

1. Changez le style du lien hypertexte

$("#mylink a").css('color','#111111');
//这里选择器‘$("#mylink a")'表示ID为'#mylink'的元素下的所有链接。
//.css(‘color','#111111');表示把颜色设为'#111111'

2. Spécifiez un style CSS défini pour l'élément HTML spécifié

1 Vous pouvez utiliser le CSS externe. file Créez un style CSS dans

.mystyle{width:200px;height:100px;}

, puis utilisez jquery pour attribuer la valeur

$("#result").css(mystyle);

2 Vous pouvez définir un objet CSS (c'est-à-dire l'objet javascript), puis attribuer la valeur

var pcss = {
 background: '#EEE',
   width: '478px',
   margin: '10px 0 0',
   padding: '5px 10px',
   border: '1px solid #CCC'
};
$("#result").css(pcss);

. similaire à la méthode du lien externe. Je recommande personnellement la méthode du lien externe .

Trois Afficher le style CSS de l'élément

var mycolor=$("#mylink a").css("color");
if ($('#myp').css('display')=="none"){...}
//和第一个例子相似，但是这里我们只传递一个参数(样式属性)

Masquer dans l'affichage p ou d'autres éléments

1. Méthode CSS

$('#myp').attr('style','display:none;');//隐藏
$('#myp').attr('style','display:block;');//显示

Apprentissage recommandé : "Tutoriel vidéo jquery"

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!