css如何使用id与class来控制元素样式的实例分析
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操作。
以上就是css如何使用id与class来控制元素样式的实例分析的详细内容，更多请关注其它相关文章！