前端开发中,实现动态改变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");
			});

vue

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

     .color1
       {
		 color:red;
	   }

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

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

     .color1
       {
		 color:red;
	   }
	   .color2
       {
		 color:blue;
	   }

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值