-
js中动态添加移除类名的方法
2021-05-10 11:23:46//1.为 <div> 元素添加一个类: document.getElementById("div").classList.add("类名"); //2....div> 元素添加多个类: ... 元素移除一个类: document.getElementById("div").classList.remove("类名展开全文//1.为 <div> 元素添加一个类: document.getElementById("div").classList.add("类名"); //2.为 <div> 元素添加多个类: document.getElementById("div").classList.add("类名1","类名2","类名3",...); //3.为 <div> 元素移除一个类: document.getElementById("div").classList.remove("类名"); //4.为 <div> 元素移除多个类: document.getElementById("div").classList.remove("类名1","类名2","类名3",...);
-
js添加和移除指定类名
2020-10-10 15:03:14<style type="text/css"> .img1 { filter: saturate(5); -webkit-filter: saturate(5); } .img{transition: all .5s;} </style> <div id="app"> ...展开全文<style type="text/css">
.img1 {filter: saturate(5);
-webkit-filter: saturate(5);}
.img{transition: all .5s;}
</style><div id="app">
<img src="img/timg.jpg" class="img" id="app">
</div>
<script type="text/javascript">
// let id = document.getElementsByTagName("img")[0]; //也可以用标签名操作
let id = document.getElementById("app")
//console.log(id.classList[1]) classList是该元素类名的数组，使用 getElementsByTagName获取标签才可正常打印。
function setTime() {
let i = id.classList.contains('img1');
if (!i) {
id.classList.add('img1')
console.log("假")
} else {
id.classList.remove("img1")
console.log("真")
}
}
let set = setInterval(setTime, 1000)
</script>
-
原生js实现dom元素节点添加类名&移除类名
2021-06-10 00:09:21给dom元素节点的class属性任意位置添加类名，移除类名时不留空格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...展开全文给dom元素节点的class属性任意位置添加类名，移除类名时不留空格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .active { color: red; } </style> </head> <body> <div class="active">点我变色</div> <div class="active on-active box">点我变色</div> <div class="box on-active active">点我变色</div> <script> // 判断类名是否存在：-1不存在，>=0存在 function hasClass(ele, className) { if (!ele.className) return -1; // 将类名用空格分隔，并组成一个数组 var arr = ele.className.split(' '); // 查找目标类名是否在数组中 var index = arr.indexOf(className); return index; } // 添加类名 function addClass(ele, className) { if (hasClass(ele, className) > -1) return; //类名存在，直接返回 ele.className += (ele.className ? ' ' + className : className); } // 移除类名 function removeClass(ele, className) { var index = hasClass(ele, className); if (index > -1) { var arr = ele.className.split(' '); arr.splice(index, 1); ele.className = arr.join(' '); } } var oDivs = document.querySelectorAll('div'); oDivs.forEach(function(item) { item.flag = true; item.onclick = function() { if (!this.flag) { addClass(this, 'active'); } else { removeClass(this, 'active'); } this.flag = !this.flag; } }) </script> </body> </html>
-
原生js实现快速方便的添加类名，移除类名
2021-04-03 13:07:57背景 想做一个给按钮按下去增加一个class替换...原生 js 有啥方便的办法吗 方法 用 .classList.a展开全文背景
想做一个给按钮按下去增加一个class替换背景颜色，如下的效果，在JQuery里面，可以直接用 addClass 和 removeClass 直接操作。原生 js 有啥方便的办法吗
方法
用
.classList.add('类名')和.classList.remove('类名')实现，一个添加，一个移除，安逸具体如下
<div class="list-group" id="listGroup1" role="tablist"> <p class="list-group-item" data-index="1">研究方向 </p> <p class="list-group-item" data-index="2">研究项目</p> <p class="list-group-item" data-index="3">科研成果</p> </div>var buttons = document.querySelector('#listGroup1').querySelectorAll('p'); //侧边栏按钮 for (var i = 0; i < buttons.length; ++i) { buttons[i].onclick = function () { var index = this.getAttribute('data-index'); if (index == '1') { buttons[0].classList.add('active'); buttons[1].classList.remove('active'); buttons[2].classList.remove('active'); } else if (index == '2') { buttons[0].classList.remove('active'); buttons[1].classList.add('active'); buttons[2].classList.remove('active'); } else if (index == '3') { buttons[0].classList.remove('active'); buttons[1].classList.remove('active'); buttons[2].classList.add('active'); } } }
-
原生js添加类名、删除类名
2020-04-21 17:56:061.添加类名 document.getElementsByClassName('myEL')[0].classList.add('checked'); 2.删除类名 document.getElementsByClassName('myEL')[0].classList.remove('checked'); 3.包含类名 document.... -
原生js添加移除类名(class)实现css3动画
2018-11-22 11:26:02源代码&amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&...css3动画及原生添加移除类 -
Vue动态给一个元素添加类名，兄弟元素移除类名
2018-11-02 16:17:44Vue动态给一个元素添加类名，兄弟元素移除类名 直接上代码,亲测可用 <template> <div> <ul> <li v-for="(item,index) in list" @click="do... -
基于JavaScript实现类名的添加与移除
2021-01-21 12:34:47//用于匹配类名存在与否 function reg(name){ return new RegExp('(^|\\s)'+name+'(\\s+|$)'); } //hasClass addClass removeClass toogleClass var hasClass,addClass,removeClass; if('classList' in document.... -
用JS添加和删除class类名
2019-08-01 16:00:51添加：节点.classList.add(“类名”)； 删除：节点.classList.remove(“类名”)； 以tab切换为例： 在写tab切换的时候，通常我们会给选中的tab设置不同的样式，常用的方法是给被选中的tab新增一个class名，然后改这... -
原生js添加 删除指定类名
2019-07-25 17:06:58indexnavigation.classList.remove("indexnavigationaClass"); indexnavigation.setAttribute("class", "slashStyle...setAttribute：跟指定的节点添加类名 节点.classList.add：跟指定节点添加类名 节点.clas... -
vue 给当前元素添加类名，移除兄弟元素类名的方法
2020-03-17 17:33:04vue 给当前元素添加类名，移除兄弟元素类名的方法： 适用于菜单高亮，跳转详情后仍然高亮当前菜单 <li v-for="(nav,index) of nav_list" :key="nav.name" class="nav" @click="handleCurrent(index)"> <... -
原生js增加，移除类名
2019-10-07 04:49:21//移除类名 box.classList.item( 1 );//根据索引找类名 console.log(box.className); console.log(box.classList.item( 1 )) script > body > html > 转载于:... -
原生js添类名，删除类名
2019-05-31 17:57:14代码 dom.classList.add('要添加的类名') dom.classList.remove('要移除的类名') dom表示被选中的dom元素 -
vue给当前元素添加类名移除兄弟元素类名的方法
2018-09-14 10:38:2719. <script type="text/javascript"> 20. var vm = new Vue({ 21. el: '#app', 22. data: { 23. name:'叶落森', 24. current:0, 25. liList:[ 26. {title:'叶落森1'}, 27. {title:'叶落森2'}, 28. {title:'叶落森3'... -
js添加类名的两种方法
2021-05-07 09:49:33移除类名 获取元素名.className = " "直接等于一个空字符串即可删除类名 2.通过classList来添加、删除类名 添加一个类名 获取元素名.classList.add("类名"); 添加多个类名用逗号隔开 获取元素名.classList..add(... -
原生JS添加类名 删除类名
2019-09-04 15:48:01为 <div> 元素移除一个类: document.getElementById("myDIV").classList.remove("mystyle"); 为 <div> 元素移除多个类: document.getElementById("myDIV").classList.remove("mystyle", "another... -
js实现类名的添加与移除
2019-08-08 22:15:27方法1：使用className属性；...//用于匹配类名存在与否 function reg(name){ return new RegExp('(^|\\s)'+name+'(\\s+|$)'); } //hasClass addClass removeClass toogleClass var hasClass,a... -
详解原生JS动态添加和删除类
2020-10-17 06:32:46主要介绍了原生JS动态添加和删除类，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 -
javaScript 添加和移除class类名的几种方法
2020-07-27 09:09:13element.className = '类名'; /* * .setAttribute 用来设置自定义属性和值的 * 自定义属性：原本标签中没有这个属性，为了存储数据，方便操作自己设置添加的。 * 自定义属性无法直接通过DOM对象的方式获取或设置... -
js在不删除原有类名追加新类名方法
2020-04-22 09:14:12添加类名 element.classList.add(class1, class2, ...); 删除类名 element.classList.remove(class1, class2, ...); 兼容IE8 function addClass(el, className) { var oldClassStr = ''; //先判断元素中... -
js 选项卡、添加类名(需要查重)和移除类名(不需要查重)
2018-03-09 08:47:02//先把原先的类名和传进来的类名按照空格进行切割 var arr1 = ele.className.split( " " ); var arr2 = cName.split( " " ); var arr3 = arr1.concat(arr2); console.log(arr3); /*for(var i = 0; i ;... -
js获取dom元素上所有的类名，增加类名，去除类名，切换类名(原生 vs jquery)
2020-06-28 21:04:21我们都知道 一个元素可以写多个类名，每个类名之间使用空格隔开 <p class="p1 p2">hello world</p> 1.原生的方法 1.1.获取元素的类名 : el.classList 可以添加多个类名 中间空格隔开 var p=document.... -
原生js操作类名
2019-10-09 07:24:32为 <div> 元素移除一个类: document.getElementById("myDIV").classList.remove("mystyle"); 为 <div> 元素移除多个类: document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", ... -
原生js对类名的操作
2020-05-22 21:07:17原生js对类名的操作 ...移除类名：Dom.classList.remove(classname) 切换类名：Dom.classList.toggle(classname) code示例 html: <button id="change_red">变为红类</button> <button id="change_ -
给js添加类名/添加元素标签/
2021-03-22 12:18:52原生js中添加类的方法 1. document.getElementById(“div”).classList.add(“类名”); //2.为 元素添加多个类: document.getElementById(“div”).classList.add(“类名1”,“类名2”,“类名3”,…); //3.为 元素...
收藏数
19,089
精华内容
7,635