精华内容
下载资源
问答
  • //移除类名 box.classList.item( 1 );//根据索引找类名 console.log(box.className); console.log(box.classList.item( 1 )) script > body > html > 转载于:...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .box{width: 200px;height: 200px;background: yellowgreen}
            .page{color: red}
            .btn{font-size: 20px;}
        </style>
    </head>
    <body>
    
    <div class="box">这是测试</div>
    
    <script>
    var box=document.getElementsByClassName("box")[0];
    
            box.className=box.className+" "+"page";//增加类名
            box.classList.add("btn");//增加类名
            box.classList.remove("btn");//移除类名
            box.classList.item(1);//根据索引找类名
            console.log(box.className);
            console.log(box.classList.item(1))
    
    </script>
    </body>
    </html>

    转载于:https://www.cnblogs.com/xiaobaibubai/p/7473750.html

    展开全文
  • 源代码&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动画及原生添加移除
    • 源代码
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>css3动画及原生添加移除类名(class)</title>
          <style>
              .two {
                  width: 100px;
                  height: 100px;
                  background-color: pink;
              }
      		/*transition实现动画*/
              /*.two.now {*/
                  /*transform: translate(500px, 100px);*/
                  /*opacity: 0.5;*/
                  /*background-color: green;*/
                  /*transition: all 1s linear;*/
              /*}*/
      		/*animation 实现动画*/
              .two.now {
                  animation: myAnimation 1s linear forwards;/*infinite alternate forwards*/
              }
              @keyframes myAnimation {
                  from {
                      transform: translate(0, 0);
                  }
                  to {
                      transform: translate(500px, 100px);
                  }
              }
          </style>
      </head>
      <body>
      <input type="button" value="开始动画" class="one">
      <input type="button" value="重置动画" class="three">
      <div class="two"></div>
      <script>
          var btn = document.getElementsByClassName('one')[0];
          var div = document.getElementsByClassName('two')[0];
          var btn2 = document.getElementsByClassName('three')[0];
          btn.onclick = function () {
          	//不同添加类名的方式
              // div.className = 'two now';
              // div.setAttribute('class', 'two now');
              
              // 虽然element.classList本身是只读的,但是你可以使用 add() 和 remove() 方法修改它。//h5的api,基于一个对象classList
              div.classList.add('now');
              
              // div.setAttribute('className', 'two now');
              // 兼容ie7及ie7以下版本
          };
          btn2.onclick = function () {
              div.classList.remove('now');
          };
          //jquery操作类的方法 addClass() removeClass() toggleClass hasClass()
          //h5 dom.classList.add() dom.classList.remove() dom.classList.toggle()
          //dom.classList.contains()
      </script>
      </body>
      </html>
      
    展开全文
  • 之前自己用原生的js添加类名和移除类名,用起来感觉还算顺手。在使用jQuery框架添加类名和移除类名时候更是觉得“傻瓜式”使用了。前两天在封装别的模块,今天想起自己也来搞一下添加类名和移除类名,,,不动手不...

         之前自己用原生的js添加类名和移除类名,用起来感觉还算顺手。在使用jQuery框架添加类名和移除类名时候更是觉得“傻瓜式”使用了。前两天在封装别的模块,今天想起自己也来搞一下添加类名和移除类名,,,不动手不知道,敲起来遇到不少bug。主要还是起初考虑的不够周到,不过调试工具真是个‘宝’;

        这里直接附上我的代码了:

     //添加类(可以一次添加多个类名)
        function addClass() {
            var arg = Array.prototype.slice.call(arguments);
            var dom = arg[0];  //取得dom
            var className = arg.slice(1); //取得要添加的类名(数组形式)
            var doms =document.querySelectorAll(dom);      //获取所有符合的dom成员
            for (var i = 0; i < doms.length;i++) {
                //为了避免当第一次设置类名且以前没有类名,会出现第一个有空格的现象
    
                if (doms[i].className) {
                    //如果之前有类名了
                    addOne(doms[i]);
                } else {
                    //首次添加类名
                    firstaddOne(doms[i]);
                }
            }
            function addOne(dom) {
                for (var j = 0; j < className.length; j++) {
                    var itemName = dom.className;
                    var itemNames = [].push.call([],itemName);
                    console.log(typeof itemNames);
                    dom.className = dom.className + ' ' + className[j];
                }
            }
    
            function firstaddOne(dom) {
                for (var j = 0; j < className.length; j++) {
                    dom.className = dom.className + className[j];
                }
            }
        }
    
    //移除类
        function removeClass() {
            var arg = Array.prototype.slice.call(arguments);
            var dom = arg[0];  //取得dom
            var className = arg.slice(1); //取得要删除的类名(数组形式)
            var doms = document.querySelectorAll(dom);      //获取所有符合的dom成员
            //遍历dom
            for(var i=0;i<doms.length;i++){
                var getAttr = doms[i].getAttribute('class');
                 var arr1 = getAttr.split(' ');
                //双重循环判断删除的类名是否与已有的类名一样
                for(var j=0;j<arr1.length;j++){
                    for(var k=0;k<className.length;k++){
                        if(arr1[j]===className[k]){
                            arr1.splice(j,1);
                            console.log(arr1.length);
                            j--;
                            break;
                        }
                    }
    
                }
                //一样--〉连同类名属性删除
                if(arr1.length==0){
                    doms[i].removeAttribute('class');
                }else{
                    //否则删除要删除的类名
                    removeOne(doms[i]);
    
                }
    
            }
    
            function removeOne(dom){
                for (var j = 0; j < className.length; j++) {
                    var getAttr = doms[i].getAttribute('class');
                    var arr1 = getAttr.split(' ');
                    if(className[0]===arr1[0]){
                        dom.className = dom.className.replace(className[j], '');
                    }else{
                        dom.className = dom.className.replace(' ' + className[j], '');
                    }
    
    
    
                }
            }
        }

    快乐的学习,才能快速的成长^_^

    转载于:https://www.cnblogs.com/Snow-G/p/5290057.html

    展开全文
  • 方法1:使用className属性; 方法2:使用classList API; //用于匹配类名存在与否 function reg(name){ return new RegExp('(^|\\s)...

    方法1:使用className属性;

    方法2:使用classList API; 

    //用于匹配类名存在与否
    function reg(name){
        return new RegExp('(^|\\s)' name '(\\s |$)');
    }
    
    //hasClass addClass removeClass toogleClass
    var hasClass,addClass,removeClass;
    if('classList' in document.documentElement){
        hasClass = function(obj, cname) {        // obj为要操作的元素对象,cname是类名
            return obj.classList.contains(cname);
        };
        addClass = function(obj, cname) {
            obj.classList.add(cname);
        };
        removeClass = function(obj,cname) {
            obj.classList.remove(cname);
        };
        toggleClass = function(obj, cname) {
            obj.classList.toggle(cname);
        };
    }else{
        hasClass = function(obj, cname) {
            return reg(cname).test(obj.className);
        };
        addClass = function(obj, cname) {
            if(!hasClass(obj,cname)){
                obj.className=obj.className ' ' cname;    
            }
        };
        removeClass = function(obj, cname) {
            obj.className=obj.className.replace(reg(cname),' ');
        };
        toggleClass = function(obj, cname) {
            var toggle=hasClass(obj,cname)?removeClass:addClass;
            toggle(obj,cname);
        };
    }
    
    //true
    document.body.classList.toString() === document.body.className;

    注意:这种方法每次只能传一个类名且不能级联操作,而jquery下面的类似操作是可以操作多个类名的。

    所以扩展一下:

    //addClass
    DOMTokenList.prototype.addClass = function(str) {
      tts.split(' ').forEach(function(c){
        this.add(c);
      }.bind(this));
      return this;
    }
    
    //removeClass
    DOMTokenList.prototype.removeClass = function(str) {
      tts.split(' ').forEach(function(t){
        this.remove(t);
      }.bind(this));
      return this;
    }
    
    //removeClass
    DOMTokenList.prototype.toggleClass = function(str) {
      tts.split(' ').forEach(function(t){
        this.toggle(t);
      }.bind(this));
      return this;
    }

     


    更多专业前端知识,请上【猿2048】www.mk2048.com
    展开全文
  • 原生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_
  • //先把原先的类名和传进来的类名按照空格进行切割 var arr1 = ele.className.split( " " ); var arr2 = cName.split( " " ); var arr3 = arr1.concat(arr2); console.log(arr3); /*for(var i = 0; i ;...
  • 代码 dom.classList.add('要添加的类名') dom.classList.remove('要移除类名') dom表示被选中的dom元素
  • 原生JS添加类名 删除类名

    千次阅读 2018-07-26 15:30:32
    用途:主要用来给元素动态添加和移除css样式。将样式封装,避免样式代码冗余。 &lt;div class="myDIV"&gt;&lt;/div&gt; &lt;style&gt; .mystyle{  display="none"...
  • JS 添加类名/删除类名

    千次阅读 2017-10-30 10:03:00
    为 元素添加 class:document.getElementById(“myDIV”).classList.add(“mystyle”);为 元素添加多个类:document.getElementById(“myDIV”).classList.add(“mystyle”, ...为 元素移除一个类:document.getElement
  • 概述Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接...
  • <style type="text/css"> .img1 { filter: saturate(5); -webkit-filter: saturate(5); } .img{transition: all .5s;} </style> <div id="app"> ...
  • 为 元素添加 class: document.getElementById(“myDIV”).classList.add(“mystyle”); 为 元素添加多个类: document.getElementById(“myDIV”).classList.add(“mystyle”, ...为 元素移除一个类: document.getE...
  • 下面介绍一下如何给一个节点添加和删除class名添加:节点.classList.add("类名");删除:节点.classList.remove("类名");以tab切换为例:在写tab切换的时候,通常我们会给选中的tab设置不同的样式,常用的方法是给...
  • JavaScript是一门运行在浏览器上的脚本语言,能够操作dom元素的属性、样式,下面我们来学习下如何使用js移除元素的css样式。js中如何移除css样式?dom元素应用css有两种方式:● 通过class类名和id名应用样式● 通过...
  • el.removeClass (function (index, css) { return (css.match (/(^|\s)star\S+/g) || []).join(' ');//移除以“star”开头的类}); 转载于:https://www.cnblogs.com/rellame/p/5387502.html
  • JS中从字符串提取整数,取类名,添加与移除类今天修改的项目内容主要包含了四点: 对jQuery用法的理解 将类名提取出来 从字符串中提取一个整数 通过jQuery对类进行添加与删除 对jQuery用法的理解在今天的项目修改中...
  • 点击切换按钮(button或什么其他标签都行)给最外层的div添加个切换背景的class类名,让页面背景变成黑色,但在跳转页面的时候让class类名保留,直到再点击按钮移除class类名,切换到白色。 最好是js,或jq!! ...
  • 在页面中,往往一个控件的外部样式或者内部样式往往不只一个,而我们只需操作其中一个样式该怎么办呢?...1.外部样式class的添加删除Html:document.getElemntById("元素id").addClass("样式类名");do...
  • .classList.add(‘类名’) .classList.remove(‘类名’) 切换类名 .classList.toggle(...该属性用于在元素中添加,移除及切换 CSS 类。 classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它。 ...
  • 移除元素的属性: element . removeAttribute ( "属性" ) ; // 4 操作元素的类 // 4.1 添加一个或多个类名 element . classList . add ( 'classone' , 'classtwo' , ··· ) ; // 4.2 删除一个或...

空空如也

空空如也

1 2 3 4 5
收藏数 88
精华内容 35
关键字:

js移除类名