css如何使用id與class來控制元素樣式的實例分析

   現在有這麼一個實例要求：

   1）畫出五個盒子，分別用紅色、紫色、橘子、綠色、藍色字體顏色來表示；

##   2）滑鼠點選其中當一個盒子時，邊框加粗並顯示與盒子字體顏色一致的顏色；

   效果如下圖：

   

               #                #  

##   以下是具體的實作想法：

   一、html內容建構

     先利用html內容表達五個盒子內容，程式碼如下：

<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>

 

二、原始樣式實現

     利用css來表達上述需求1的樣式需求，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的至此可以完成圖1的效果。

 三、互動樣式實現

       接下來透過分析需求2，我們發現只要在點選每個li元素時，為此元素賦予一個線框加粗而且顏色改變的樣式即可實現。那麼如何加入樣式呢，通常我們的做法就是為每個li添加一個class（類別）屬性，並設定該class的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");


       }

    });

});

最終實現的效果如圖2所示：

                 圖（22）互動效果圖（22）交互效果圖a                                                #四、程式碼最佳化

       

問題：透過觀察上面程式碼的實作方式，讀者可能很快就會發現一個問題：js中的程式碼操作繁瑣，還要遍歷，整體效率低

。

       分析：那麼如何改善與最佳化呢？透過分析我們發現，js中的程式碼之所以複雜，是因為每個li元素的需求1原始樣式由id控制，如＃level1｛......｝，而需求2的交互樣式由class屬性控制，如.level1_selected{......},，而且每個li元素的原始樣式和交互樣式都不一樣，所以造成交互時必須進行索引定位和遍歷實現樣式的改變。

       

解決方法：既然是css樣式設定方式的問題，那麼如何設計改變呢，其實這裡我們可以遵循這樣一個理念：盡量少的去增加新的控制類，以減少後續的js操作。

例如上述的方法就是在需求2的解決方法中為每個li增加了一個“選中類別”，如類別level1_selected、類別level2_selected......。這裡理想的解決方法是只增加一個類別selected，但是selected類別要透過與每個li的id結合使用，從而保證每個selected類別的具有不同樣式。可能有些同學到這裡沒怎麼看懂，沒關係！看下面程式碼就知道了。

      重新設計需求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程式碼如此簡潔！所以這裡得出的一個結論就是（上面已經提到過）：

盡量少的去增加新的控制類，以減少後續的js操作。

 

以上是css如何使用id與class來控制元素樣式的實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！