CSS が ID とクラスを使用して要素スタイルを制御する方法の分析例

ここで、次のような要件があります:

1) 赤、紫、オレンジ、緑、青のフォントの色で表される 5 つのボックスを描画します

2) マウスがボックスの 1 つをクリックすると、境界線が次のようになります。太字で表示されます。ボックスのフォントの色はその色と一致しています。

の効果は以下のようになります:

(図 1) ボックスのレンダリング

以下は具体的な実装アイデアです:

5つのボックスの内容、コードは次のとおりです: 🎜

<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. オリジナルスタイルの実装 🎜🎜🎜 上記要件1のスタイル要件をCSSで表現します。CSSコードは次のとおりです。 : 🎜

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;

}

🎜 この時点で、図 1 の効果が完成します。 🎜🎜🎜 3. インタラクティブスタイルの実装🎜🎜🎜 次に、要件2を分析することで、各li要素をクリックするとワイヤーフレームが太字になり色が変わるスタイルを要素に与えることで実装できることが分かりました。では、スタイルを追加するにはどうすればよいでしょうか? 通常、私たちのアプローチは、各 li にクラス属性を追加し、クラスの CSS スタイル (境界線の太字、色の変更) を設定することです。具体的な CSS コードは次のとおりです: 🎜

.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;
}

🎜 次に、 JS コントロール インタラクティブ スタイルのコードは次のとおりです。 🎜

$("#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");


       }

    });

});

e 🎜 最終的な実装効果を図 2 に示します。 🎜🎜🎜🎜🎜 図 (2) インタラクション レンダリング A インタラクティブ レンダリング B🎜🎜 🎜 4. コードの最適化 🎜🎜🎜 問題:🎜上記のコードの実装を観察することで、読者はすぐに問題を発見するかもしれません: 🎜 js のコードは操作が面倒で、トラバースする必要があり、全体的な効率が低いです 🎜。 🎜🎜 🎜分析: 🎜それでは、どのように改善し、最適化するのでしょうか?解析の結果、js のコードが複雑になる理由は、各 li 要素の要件 1 の独自のスタイルが #level1{......} などの id によって制御されているのに対し、対話型のスタイルは要件 2 は、 .level1_selected{......} などの class 属性によって制御され、各 li 要素の元のスタイルとインタラクティブ スタイルは異なるため、インタラクション中にスタイルを変更するにはインデックスの位置決めとトラバーサルを実行する必要があります。 。 🎜🎜 🎜解決策: 🎜これは CSS スタイルの設定方法に問題があるため、変更をどのように設計すればよいでしょうか? 🎜実際、ここではこのコンセプトに従うことができます: 後続の JS 操作を減らすために、できるだけ少ない数の新しいコントロール クラスを追加します。 🎜たとえば、上記の方法は、要件 2 の解決策の各 li に「選択されたクラス」を追加することです (class level1_selected、class level2_selected... など)。ここでの理想的な解決策は、選択したクラスを 1 つだけ追加することですが、選択した各クラスが異なるスタイルを持つようにするには、選択したクラスを各 li の ID と組み合わせて使用​​する必要があります。ここをあまり理解していない生徒もいるかもしれませんが、大丈夫です。以下のコードを見てください。 🎜🎜 要件 2 (選択済み) のインタラクションを再設計します 🎜

#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;
}

🎜 次に、js のコードがどのように変更されたかを見てみましょう。読者は、私が変更したスタイル クラスに基づいて js 操作コードを書くこともできます。私が下に書いたことと同じですか？ 🎜

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

});

🎜🎜 コードを読んだ後、あなたも私と同じように幸せを感じますか? 結局のところ、CSS でクラスを追加する方法を変更するだけで、その後の JS コードがこんなに簡潔になります!したがって、ここで導き出される 1 つの結論は次のとおりです (すでに上で説明しました): 🎜後続の JS 操作を減らすために、新しいコントロール クラスをできるだけ少なく追加します。 🎜🎜🎜

以上がCSS が ID とクラスを使用して要素スタイルを制御する方法の分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。