1 var s="<li class=\"show\">"+init[i]+"</li>";
js 中添加类名
1 var s="<li class=\"show\">"+init[i]+"</li>";js 中添加类名
转载于:https://www.cnblogs.com/gf1394/p/6398563.html
用js添加类名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue.js"></script> <script src="./index.js"></script> <link rel="stylesheet" href="./index.css"> </head> <style> .active{ background:#409EFF } </style> <body> <div id="app" style="width:500px; margin:0 auto"> <el-button v-for="(buttonArr, index) in buttons">{{buttonArr.primary}}</el-button> </div> </body> <script> var app = new Vue({ el:"#app", data(){ return{ buttons:[{ primary:'默认按钮' }, { primary:'默认按钮' }, { primary:'默认按钮' },{ primary:'默认按钮' }], } }, mounted(){ var arr = document.getElementsByClassName("el-button") for(var i=0; i<arr.length;i++){ arr[i].classList.add("active") i++ } } }) </script> </html>
js添加类名实现按钮切换
方法一:` <div class=“buttons” @click=“tap”>
js:
// 点击评价
tap(e) {
if (e.target.className === ‘button’) {
for (var i = 0; i < e.target.parentNode.children.length; i++) {
e.target.parentNode.children[i].className = ‘button’
}
e.target.className = ‘buttonss’
}
},
方法二:
是否授权查看健康档案
<van-button
ref=“a”
color="#F6F6F5"
@click.native=“tap(this)”
:class=“isActive ? ‘hospital’ :‘van-button–default’”
>授权
<van-button
ref=“b”
color="#F5F5F5"
@click.native=“no(this)”
:class=“Active ? ‘hospital’ :‘van-button–default’”
>不授权
data中定义:
isActive: false,
Active: false,
js:
// 点击授权按钮
tap (e) {
this.isActive = true
this.Active = false
},
// 点击不授权按钮
no () {
this.isActive = false
this.Active = !this.isActive
},
动态添加class类名在前端开发过程中是很常见得做法,比如说在实现轮播图的时候给当前图片的锚点添加一个active类,有又或者在实现动画的时候添加一个终态css类。
当然,有很多js库中封装了添加类名的方法,典型的比如jquery中的addClass()方法。但是,在实际开发中,如果页面比较简单,逻辑功能不是特别复杂的时候。还是推荐用原生的js来实现这些功能,这样能够有效的提升用户的体验效果。试想一下,如果你开发的一个页面总共也就几百行代码,用户每次使用的时候还要去加载几k甚至几十k的js库文件。对于用户而言,这个体验效果可想而知。
首先,我们了解下js有哪些可以设置class的方法。主要有三种,el.setAttribute('class','class1'),el.setAtrribute('className','class2')以及el.className='class3'.
.class1{ width:50px; backgroud-color:red; height:40px; } .class2{ width:100px; height:200px; background-color:#cccccc } .class3{ width:20px; height:50px; background-color:green; }
el.setAttribute('class','class1')
兼容性 ie7及ie7以下版本不支持
<div id='test1'></div> <script> document.getElementById('test1').setAttribute('class','class1') </script>
el.setAttribute('className', 'class2')
兼容性:恰好和el.setAttribute('class','class1')相反,不兼容ie7+ /Firefox/Safari/Chrome/Opera 兼容ie7及ie7以下版本
<div id='test2'></div> <script> document.getElementById('test2').setAttribute('className','class2') </script>
el.className='class3'
兼容性:所有浏览器都支持 ,有没有很兴奋,哈哈哈。终于找到你,还好我没放弃。
废话不多说,先来段代码
<div id='test3'></div> <script> document.getElementById('test3').className='class3' </script>
你以为这样就没了么,js其实还有别的方法可以添加class类名哦,下面我们就来看看。
Element.classList https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList
Element.classList 是一个只读属性,返回一个元素的类属性的实时DOMTokenList
集合。
add( String [, String] )
添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。
// div是具有class =“foo bar”的<div>元素的对象引用 div.classList.add("anotherclass");
说到这里,就来多提一下Element.classList吧
它总共有五种方法add( String [, String] ) remove( String [,String] ) item ( Number ) toggle ( String [, force] ) contains( String )
remove( String [,String] )
删除指定的类值。
item ( Number )
按集合中的索引返回类值。
toggle ( String [, force] )
当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true。
当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它
contains( String )
检查元素的类属性中是否存在指定的类值。
// div是具有class =“foo bar”的<div>元素的对象引用 div.classList.remove("foo"); div.classList.add("anotherclass"); // 如果visible被设置则删除它,否则添加它 div.classList.toggle("visible"); // 添加/删除 visible,取决于测试条件,i小于10 div.classList.toggle("visible", i < 10); alert(div.classList.contains("foo")); //添加或删除多个类 div.classList.add("foo","bar"); div.classList.remove("foo", "bar");
备注:关于element.classList的介绍以及实例来自于MDN,链接我在上边已经给出,想要了解更多请查看MDN上的接口文档
今天就到这里吧,分享是一种快乐,学习是一种习惯。
关注博主公众号,获取更多前端干货!