精华内容
下载资源
问答
  • //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",...);
    
    展开全文
  • <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>

    展开全文
  • 给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>
    
    展开全文
  • 背景                 想做一个给按钮按下去增加一个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:06
    1.添加类名 document.getElementsByClassName('myEL')[0].classList.add('checked'); 2.删除类名 document.getElementsByClassName('myEL')[0].classList.remove('checked'); 3.包含类名 document....
  • 源代码&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;...css3动画及原生添加移除
  • Vue动态给一个元素添加类名,兄弟元素移除类名 直接上代码,亲测可用 &lt;template&gt; &lt;div&gt; &lt;ul&gt; &lt;li v-for="(item,index) in list" @click="do...
  • //用于匹配类名存在与否 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:58
    indexnavigation.classList.remove("indexnavigationaClass"); indexnavigation.setAttribute("class", "slashStyle...setAttribute:跟指定的节点添加类名 节点.classList.add:跟指定节点添加类名 节点.clas...
  • vue 给当前元素添加类名移除兄弟元素类名的方法: 适用于菜单高亮,跳转详情后仍然高亮当前菜单 <li v-for="(nav,index) of nav_list" :key="nav.name" class="nav" @click="handleCurrent(index)"> <...
  • //移除类名 box.classList.item( 1 );//根据索引找类名 console.log(box.className); console.log(box.classList.item( 1 )) script > body > html > 转载于:...
  • 代码 dom.classList.add('要添加的类名') dom.classList.remove('要移除类名') dom表示被选中的dom元素
  • 19. <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'...
  • 移除类名 获取元素名.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...
  • 方法1:使用className属性;...//用于匹配类名存在与否 function reg(name){ return new RegExp('(^|\\s)'+name+'(\\s+|$)'); } //hasClass addClass removeClass toogleClass var hasClass,a...
  • 主要介绍了原生JS动态添加和删除类,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • element.className = '类名'; /* * .setAttribute 用来设置自定义属性和值的 * 自定义属性:原本标签中没有这个属性,为了存储数据,方便操作自己设置添加的。 * 自定义属性无法直接通过DOM对象的方式获取或设置...
  • 添加类名 element.classList.add(class1, class2, ...); 删除类名 element.classList.remove(class1, class2, ...); 兼容IE8 function addClass(el, className) { var oldClassStr = ''; //先判断元素中...
  • //先把原先的类名和传进来的类名按照空格进行切割 var arr1 = ele.className.split( " " ); var arr2 = cName.split( " " ); var arr3 = arr1.concat(arr2); console.log(arr3); /*for(var i = 0; i ;...
  • 我们都知道 一个元素可以写多个类名,每个类名之间使用空格隔开 <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中添加类的方法 1. document.getElementById(“div”).classList.add(“类名”); //2.为 元素添加多个类: document.getElementById(“div”).classList.add(“类名1”,“类名2”,“类名3”,…); //3.为 元素...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,089
精华内容 7,635
关键字:

js移除类名