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来控制元素样式的实例分析的详细内容，更多请关注其它相关文章！