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的值来决定展示哪个样式。