精华内容
下载资源
问答
  • 添加类名 获取元素.className = "类名1 类名2 ..."多个类名用空格隔开 移除类名 获取元素名.className = " "直接等于一个空字符串即可删除类名 2.通过classList来添加、删除类名 添加一个类名 获取元素名.classList....

    1.通过className来添加、删除类名

    添加类名
    获取元素.className = "类名1 类名2 ..."多个类名用空格隔开
    移除类名
    获取元素名.className = " "直接等于一个空字符串即可删除类名

    2.通过classList来添加、删除类名

    添加一个类名
    获取元素名.classList.add("类名");
    添加多个类名用逗号隔开
    获取元素名.classList..add("类名1","类名2","类名3",...); 每个类名需要用引号引起来
    移除一个类名
    获取元素名.classList.remove("类名");
    移除多个类名
    获取元素名.classList..remove("类名1","类名2","类名3",...); 每个类名需要用引号引起来

    举个栗子

    在这里插入图片描述

    <style>
            input {
                outline: none;
                height: 35px;
                line-height: 35px;
                border: 1px solid #ccc;
                color: #999;
                text-indent: 1rem;
                display: inline-block;
                transition: all .3s;
            }
    
            .active {
                border: 1px solid skyblue;
                color: #333;
            }
    
            .active2 {
                box-shadow: 0 0 3px 2px pink;;
            }
        </style>
    
    <input type="text" value="手机">
        <script>
            window.onload = function () {
                document.querySelector('input').onfocus = function () {
                    this.value = ""
                    // 方法一:
                    // this.style.color = "#333"
                    // this.style.border = "1px solid skyblue"
    
                    // 方法二:
                    this.classList.add("active", "active2");
    
                    // 方法三:
                    // this.className = "active active2"
                }
                // trim() 去除空格
                document.querySelector('input').onblur = function () {
                    if (this.value.trim() == "") {
                        this.value = "手机"
                        // 方法一:
                        // this.style.color = "#999"
                        // this.style.border = "1px solid #ccc"
    
                        // 方法二:
                        this.classList.remove("active", "active2");
    
                        // 方法三:
    
                        // this.className = ""
                    }
                }
            }
        </script>
    
    展开全文
  • 原生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....

    1.添加类名

    document.getElementsByClassName('myEL')[0].classList.add('checked');
    

    2.删除类名

    document.getElementsByClassName('myEL')[0].classList.remove('checked');
    

    3.包含类名

    document.getElementsByClassName('myEL')[0].classList.contains('checked'); 
    //true or false
    
    展开全文
  • 原生js添加类的方法 1. document.getElementById(“div”).classList.add(“类名”); //2.为 元素添加多个类: document.getElementById(“div”).classList.add(“类名1”,“类名2”,“类名3”,…); //3.为 元素...

    原生js中添加类的方法

    1. document.getElementById(“div”).classList.add(“类名”);ie10以上支持

    • 添加类ele.classList.add("","") ,
    • 删除类ele.classList.remove("",""),
    • 替换类ele.classList.replace(“a”,“b”),将a替换成b
    • ele.classList.toggle("",""),有的时候删除,没有的时候添加
    • ele.classList.contains("")判断是否有某个类
      • ele.classList.length("")返回类的长度(数量),没有返回0
    const div = document.createElement('div');
    div.className = 'foo';
    
    // 初始状态:<div class="foo"></div>
    console.log(div.outerHTML);
    
    // 使用 classList API 移除、添加类值
    div.classList.remove("foo");
    div.classList.add("anotherclass");
    
    // <div class="anotherclass"></div>
    console.log(div.outerHTML);
    
    // 如果 visible 类值已存在,则移除它,否则添加它
    div.classList.toggle("visible");
    
    // add/remove visible, depending on test conditional, i less than 10
    div.classList.toggle("visible", i < 10 );
    
    console.log(div.classList.contains("foo"));
    
    // 添加或移除多个类值
    div.classList.add("foo", "bar", "baz");
    div.classList.remove("foo", "bar", "baz");
    
    // 使用展开语法添加或移除多个类值
    const cls = ["foo", "bar"];
    div.classList.add(...cls);
    div.classList.remove(...cls);
    
    // 将类值 "foo" 替换成 "bar"
    div.classList.replace("foo", "bar");
    
        <script>
            // classList , 兼容问题 ,支持IE10以上
            // babel-polyfill.js
            // polyfill
            // HTMLDivElement  继承 HTMLElement
    
    var isClsList = 'classList' in HTMLElement.prototype;
    if(!isClsList) {
        Object.defineProperty(HTMLElement.prototype,'classList',{
            get:function(){
                // add, remove ,contains,toggle
                // this  - > 
                var _self = this;
                return {
                    add:function(cls){
                        if(!this.contains(cls)){
                            _self.className +=' ' + cls;
                        }
                    },
                    remove(cls){
                        if(this.contains(cls)){ 
                            var reg= new RegExp(cls);   
                            _self.className =  _self.className.replace(reg,'');
                        }
                    },
                    contains(cls){      
                      var index =  _self.className.indexOf(cls);
                        return  index!=-1 ? true : false;
                    },
                    toggle(cls){
                        if(this.contains(cls)){ 
                            this.remove(cls)
                        } else {
                            this.add(cls)
                        }
                    }
                }
            }
        })
    }
    
    var classListDom = document.getElementById('classListDom');
    classListDom.classList.contains('test')
    classListDom.classList.add('ok')
    classListDom.classList.toggle('ok')
     </script>
    

    2.document.getElementById(‘test3’).className=‘class3’

    document.getElementById(‘test3’).className+='class3’添加类

    3.原生JS添加元素属性

    getAttribute:获取某一个属性的值
    setAttribute:建立一个属性,并同时给属性捆绑一个值
    createAttribute:仅建立一个属性
    removeAttribute:删除一个属性
    hasAttribute:是否含有某个属性

    getAttributeNode:获取一个属性作为对象
    setAttributeNode:建立一个节点
    removeAttributeNode:删除一个属性

    前者删除或添加后不返回值,后者返回值是被添加或删除的属性

    4.jquery中添加类的方法

    //1.为

    元素添加一个类:
    $("#div").addClass(“类名”);

    //2.为

    元素添加多个类:
    //只需要通过空格来间隔 class 值即可一次性添加多个 class
    $("#div").addClass(“类名1 类名2 类名3”);

    //3.为

    元素移除一个类:
    $("#div").removeClass(“类名”);

    //4.为

    元素移除多个类:
    //只需要通过空格来间隔 class 值即可一次性清除掉多个 class
    $("#div").removeClass(“类名1 类名2 类名3”);

    展开全文
  • 原生JS添加类名 删除类名

    千次阅读 2019-09-04 15:48:01
    元素添加 class: document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类: document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass".....

    为 <div> 元素添加 class:

    document.getElementById("myDIV").classList.add("mystyle");

     

    为 <div> 元素添加多个类:

    document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

     

    为 <div> 元素移除一个类:

    document.getElementById("myDIV").classList.remove("mystyle");

     

    为 <div> 元素移除多个类:

    document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

     

    检查是否含有某个CSS类

    myDiv.classList.contains('myCssClass'); //return true or false

     

    检查页面是否包含某个元素

    if(document.getElementById("p1")) {
        console.log("p1存在");
    } else {
        console.log("p1不存在");
    }
    

    注意:

    在使用jquery时,判断页面是否包含某个元素,应该使用下面写法:

    if($("#p11").length > 0) {
        console.log("p1存在");
    } else {
        console.log("p1不存在");
    }

    而不是:

    if($("#p11")) {
        console.log("p1存在");
    } else {
        console.log("p1不存在");
    }

    如果使用后面的写法,无论页面是否包含id为p11的元素,都打印“p1存在”。

    原因:$("#p11")是一个对象,数据类型为object。

    当页面存在这个元素时,打印结果如下

    当页面元素不存在时,打印结果如下:

    展开全文
  • 原生js添加类名

    万次阅读 2018-01-18 23:48:01
     当然,有很多js库中封装了添加类名的方法,典型的比如jquery中的addClass()方法。但是,在实际开发中,如果页面比较简单,逻辑功能不是特别复杂的时候。还是推荐用原生的js来实现这些功能,这样能够有效的提升...
  • js添加类名

    2019-11-19 14:26:06
    js添加类名 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
  • js添加类名实现按钮切换 方法一:` <div class=“buttons” @click=“tap”> 全部(320000) 好评(32) 中评(32) 差评(0) js: // 点击评价 tap(e) { if (e.target.className === ‘button’) { for (var...
  • //用于匹配类名存在与否 function reg(name){ return new RegExp('(^|\\s)'+name+'(\\s+|$)'); } //hasClass addClass removeClass toogleClass var hasClass,addClass,removeClass; if('classList' in document....
  • 给dom元素节点的class属性任意位置添加类名,移除类名时不留空格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
  • 如何在JavaScript中为元素添加类名

    千次阅读 2020-07-27 07:19:09
    Adding class names using JavaScript can be often used to give certain functionalities to your web application. In this article, we will learn how to add class names to elements on the DOM through Java...
  • 主要介绍了用JS添加和删除class类名,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 1.添加类名: document.getElementById("myDiv").classList.add('mystyle'); 2.删除类名: document.getElementById("myDiv").classList.remove('mystyle'); 3.检查是否含有某个css类: myDiv.class...
  • js 添加类名

    2017-02-14 17:27:00
    1 var s="<li class=\"show\">"+init[i]+"</li>"; js添加类名 转载于:https://www.cnblogs.com/gf1394/p/6398563.html
  • 原生JS 实现给标签添加类名

    千次阅读 2019-12-20 10:28:48
    原生js点击添加类名
  • //1.为 <div>...document.getElementById("div").classList.add("类名1","类名2","类名3",...); //3.为 <div> 元素移除一个类: document.getElementById("div").classList.remove("类名
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...Do.
  • 微信小程序 动态添加类名

    千次阅读 2020-05-09 18:28:15
    微信小程序 动态添加类名 和vue的语法差不多,一个小测试 <view class="list-top"> <view data-num="1" class="list-menu list-menu1 {{_num==1?'active':''}}" bindtap="menuClick">头条</view>...
  • JS删除类名和添加类名

    千次阅读 2019-06-28 21:40:02
    添加类名 element.classList.add(class1, class2, ...); 兼容IE8的写法 function addClass(el, className) { var oldClassStr = ''; //先判断元素中是否有class属性 if(ele.getAttribute('class')){ ...
  • JS 添加类名/删除类名

    千次阅读 2017-10-30 10:03:00
    为 元素添加 class:document.getElementById(“myDIV”).classList.add(“mystyle”);为 元素添加多个类:document.getElementById(“myDIV”).classList.add(“mystyle”, “anotherClass”, “thirdClass”);为 ...
  • JS添加和删除class类名

    千次阅读 2018-12-20 14:41:59
    面介绍一下如何给一个节点添加和删除类名 添加:节点.classList.add( “类名”); 删除:节点.classList.remove( “类名”);   以选项卡切换为例: 在写标签切换的时候,通常我们会给选中的标签设置不同的...
  • 添加类名 element.classList.add(class1, class2, ...); 删除类名 element.classList.remove(class1, class2, ...); 兼容IE8 function addClass(el, className) { var oldClassStr = ''; //先判断元素中...
  • 为 元素添加 class: document.getElementById("myDIV").classList.add("mystyle");   为 元素添加多个类: document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");...
  • 为 元素添加 class: document.getElementById("myDIV").classList.add("mystyle");   为 元素添加多个类: document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");   为
  • 主要介绍了原生js添加一个或多个类名的方法,结合实例形式分析了javascript针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 66,014
精华内容 26,405
关键字:

js添加类名