css利用id和class來控制元素樣式技巧總結

來源:互聯網
上載者:User

   現在有這麼一個執行個體要求:

   1)畫五個盒子,分別用紅、紫、橙、綠、藍字型顏色來表示;

   2)滑鼠點擊其中一個盒子時,邊框加粗並顯示與盒子字型顏色一致的顏色;

   效果如下圖:

   

                       (圖1)盒子效果圖


   下面是具體的實現思路:

   一、html內容構建

     首先利用html內容表達五個盒子內容,代碼如下:

<ul id='levelGroup'>    <li id='level1' >紅</li>    <li id='level2' >紫</li>    <li id='level3' >橙</li>    <li id='level4' >綠</li>    <li id='level5' >藍</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的效果。

 三、互動樣式實現

       接下來通過分析需求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所示:


                 圖(2)互動效果圖a                                                                     互動效果圖b

   四、代碼最佳化

       問題:通過觀察上面代碼的實現方式,讀者可能會很快發現一個問題: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操作。
 




相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.