css如何使用id与class来控制元素样式的实例分析

2019年8月30日00:44:01 评论 25

现在有这么一个实例要求:

1)画五个盒子,分别用红、紫、橙、绿、蓝字体颜色来表示;

2)鼠标点击其中一个盒子时,边框加粗并显示与盒子字体颜色一致的颜色;

效果如下图:

css如何使用id与class来控制元素样式的实例分析

(图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所示:

css如何使用id与class来控制元素样式的实例分析css如何使用id与class来控制元素样式的实例分析
图(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来控制元素样式的实例分析的详细内容,更多请关注css教程其它相关文章!

weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: