Exemple d'analyse de la façon dont CSS utilise l'identifiant et la classe pour contrôler les styles d'éléments

Il existe maintenant un exemple d'exigence :

1) Dessinez cinq cases, représentées par les couleurs de police rouge, violet, orange, vert et bleu

2) Cliquez avec la souris sur l'une d'elles ; d'entre eux Lorsqu'il s'agit d'une boîte, la bordure est en gras et affiche la même couleur que la couleur de la police de la boîte

L'effet est le suivant :

(Image 1) Rendu de la boîte

Voici l'idée spécifique de mise en œuvre :

1. Construction de contenu HTML

Tout d'abord, utilisez le contenu html pour exprimer le contenu des cinq cases. Le code est le suivant :

<ul id=&#39;levelGroup&#39;>

    <li id=&#39;level1&#39; >红</li>
    <li id=&#39;level2&#39; >紫</li>
    <li id=&#39;level3&#39; >橙</li>
    <li id=&#39;level4&#39; >绿</li>
    <li id=&#39;level5&#39; >蓝</li>

 </ul>

2. Implémentation du style original

Utilisez CSS pour exprimer les exigences de style du. exigence ci-dessus 1. Le code CSS est le suivant :

body{
  
  font-size: 10px;

}

#levelGroup{

	list-style: none;
	border: 1px solid gray;
	height: 40px;
	width: 200px;
	overflow: hidden;
	padding: 10px;

}

#level1{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: red;
	margin-right: 5px;
	text-align: center;
	padding-top: 5px;
}


#level2{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: purple;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}

#level3{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: orange;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}
#level4{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: green;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}
#level5{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: blue;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}

Jusqu'à présent, vous pouvez compléter l'effet de la figure 1.

3. Implémentation du style interactif

Ensuite, en analysant l'exigence 2, nous avons constaté que tant que chaque élément li est cliqué, l'élément reçoit un gras filaire Et le style changeant de couleur peut être réalisé. Alors comment ajouter un style ? Habituellement, notre approche consiste à ajouter un attribut de classe à chaque li et à définir le style CSS de la classe (bordure grasse, changement de couleur), le code CSS spécifique est le suivant :

.level1_selected{

  border: 2px solid red !important;

}

.level2_selected{

	border: 2px solid purple !important;
}
.level3_selected{

	border: 2px solid orange !important;
}
.level4_selected{

	border: 2px solid green !important;
}
.level5_selected{

	border: 2px solid blue !important;
}

Ensuite, le code permettant d'utiliser js pour contrôler le style interactif est le suivant :

$("#levelGroup li").click(function()
   
      //首先获取该元素的索引
      var index = $(this).index();


      //接着为该li添加相应的css交互样式
       var para_index = index+1;
       $(this).addClass("level"+para_index+"_selected");


     //同时也要将其他li元素的样式还原为初始状态
     $("#levelGroup li").each(function(){
        var curIndex = $(this).index();
        if(curIndex !=index){
             
             curIndex = curIndex+1;
             $(this).removeClass("level"+curIndex+"_selected");


       }

    });

});

L'effet final est illustré dans la figure 2 :

Figure (2) L'interaction rend une optimisation

Question :

Le code en js est difficile à utiliser et doit être parcouru, et l'efficacité globale est faible. Analyse :

Solution :

En fait, on peut suivre ce concept ici : ajouter le moins de nouveaux contrôles possible ? classe possible pour réduire les opérations js ultérieures. Par exemple, la méthode ci-dessus consiste à ajouter une "classe sélectionnée" à chaque li dans la solution à l'exigence 2, telle que la classe level1_selected, la classe level2_selected.... La solution idéale ici est d'ajouter une seule classe sélectionnée, mais la classe sélectionnée doit être utilisée conjointement avec l'identifiant de chaque li pour garantir que chaque classe sélectionnée a un style différent. Peut-être que certains élèves ne comprennent pas grand chose ici, ce n'est pas grave ! Regardez simplement le code ci-dessous. Repenser l'interaction de l'exigence 2 (sélectionnée)

Ensuite, nous pouvons voir comment le code en js est modifié. Les lecteurs peuvent également le modifier selon moi. classe de style, écrivez d'abord le code d'opération js. Est-ce le même que ce que j'ai écrit ci-dessous ?

#level1.selected{

	border: 2px solid red;

}

#level2.selected{

	border: 2px solid purple;
}
#level3.selected{

	border: 2px solid orange;
}
#level4.selected{

	border: 2px solid green;
}
#level5.selected{

	border: 2px solid blue;
}

$("#levelGroup li").click(function(){
   
      $(this).addClass("selected").siblings().removeClass("selected");

});

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!