前端开发中，实现动态改变css样式的几种方式_动态修改css样式

jquery

		方法
			addClass()-向被选元素添加一个或多个类
			removeClass()-从被选元素删除一个或多个元素
			toggleClass()-对被选元素进行添加/删除类的切换操作
			css()-设置或返回样式属性
		
		例如下面两个样式
			.color1
			{
				color:red;
			}
			.color2
			{
				color:blue;
			}
			
		实例
		   1、jQuery addClass()方法
			下面的例子展示如何向不同的元素添加class属性.
			当然在添加类时,您可以选取多个元素
			$("#btn1").click(function(){
				$("h1,h2,p").addClass("color1");
				$("div").addClass("color1");
			});
		  2、jQuery removeClass()方法
			下面的例子演示如何在不同的元素中时删除指定的class属性
			$("#btn2").click(function(){
					$("h1,h2,p").removeClass("color1");
				});
			});
		  3、jQuery toggleClass()方法
			下面的例子将展示如何使用jQuery toggleClass()方法,点击被选元素进行添加color1，再次点击删除color1类
			$("#btn3").click(function(){
				$("h1,h2,p").toggleClass("color1");
			});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

vue

<div :class={color1：ifshow==true} />

     .color1
       {
		 color:red;
	   }
1
2
3
4
5
6

在Vue中我们可以动态的设置类名，如上个实例所示，color1是我们写好的样式，我们在data中定义ifshow，通过控制ifshow的true或者false来决定是否展示类名。
以此为基础，如果我们想在不展示color1时展示color2，那么我们可以这样做

<div :class={color1：ifshow==true , color2：ifshow==false} />

     .color1
       {
		 color:red;
	   }
	   .color2
       {
		 color:blue;
	   }
1
2
3
4
5
6
7
8
9
10

这样来看我们可以通过控制ifshow的值来决定展示哪个样式。