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;
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;
css鼠标点击样式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、类
。这⾥理想的解决⽅法是只增加⼀个类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操作。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论