Example analysis of how css uses id and class to control element styles

Now there is such an example requirement:

1) Draw five boxes, represented by red, purple, orange, green and blue font colors;

2) Click the mouse on one of them When it is a box, the border will be bolded and displayed in the same color as the font color of the box;

## The following is the specific implementation idea:

1. HTML content construction

First, use html content to express the contents of the five boxes. The code is as follows:

<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. Original style implementation

Use css to express the style requirements of the above requirement 1. The css code is as follows:

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;

}

At this point, Figure 1 can be completed Effect.

3. Implementation of interactive style

Next, by analyzing requirement 2, we found that as long as each li element is clicked, the element is given a wireframe bold And the color changing style can be realized. So how to add a style? Usually our approach is to add a class attribute to each li and set the css style of the class (border bold, color change), the specific css code is as follows:

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

Next, the code for using js to control the interactive style is as follows:

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


       }

    });

});

The final effect is shown in Figure 2:

## Figure a                                                                                                                                                                                                                                                                                   ​Readers may quickly discover a Problem: The code operation in

js is cumbersome and needs to be traversed, and the overall efficiency is low

.

Analysis:

So how to improve and optimize? Through analysis, we found that the reason why the code in js is complicated is that the original style of requirement 1 of each li element is controlled by id, such as #level1{......}, while the interactive style of requirement 2 is controlled by the class attribute , such as .level1_selected{......}, and the original style and interactive style of each li element are different, so index positioning and traversal must be performed to change the style during interaction.
Solution:

Since it is a problem with the css style setting method, how to design changes?

In fact, we can follow this concept here: add as few new controls as possible class to reduce subsequent js operations. For example, the above method is to add a "selected class" to each li in the solution to requirement 2, such as class level1_selected, class level2_selected.... The ideal solution here is to add only one class selected, but the selected class must be used in conjunction with the id of each li to ensure that each selected class has a different style. Maybe some students don’t understand much here, that’s okay! Just look at the code below.

Redesign the interaction of requirement 2 (selected)

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

Then, we can see how the code in js has changed. Readers can also change the style class according to me First write the js operation code yourself. Is it the same as what I wrote below?

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

});

After reading the code, do you feel as happy as me? After all, just changing the way of adding classes in css can make the subsequent js code so concise! So one conclusion drawn here is (already mentioned above):

Add as few new control classes as possible to reduce subsequent js operations.

The above is the detailed content of Example analysis of how css uses id and class to control element styles. For more information, please follow other related articles on the PHP Chinese website!