使用JavaScript（无jQuery）从元素中删除CSS类[重复]

13 回答

• 1

  这是一种将此功能直接烘焙到所有DOM元素中的方法：

  HTMLElement.prototype.removeClass = function(remove) {
      var newClassName = "";
      var i;
      var classes = this.className.split(" ");
      for(i = 0; i < classes.length; i++) {
          if(classes[i] !== remove) {
              newClassName += classes[i] + " ";
          }
      }
      this.className = newClassName;
  }
  

  回复于 2024-04-20T19:57:32+08:00
• 2

  正确和标准的方法是使用 classList . 现在是widely supported in the latest version of most modern browsers：

  ELEMENT.classList.remove("CLASS_NAME");
  

  文件：https://developer.mozilla.org/en/DOM/element.classList

  回复于 2024-04-20T19:57:32+08:00
• 506

  document.getElementById("MyID").className =
      document.getElementById("MyID").className.replace(/\bMyClass\b/,'');
  

  其中 MyID 是元素的ID，MyClass是您要删除的类的名称 .

  ---

  UPDATE: 要支持包含短划线字符的类名，例如"My-Class"，请使用

  document.getElementById("MyID").className =
    document.getElementById("MyID").className
      .replace(new RegExp('(?:^|\\s)'+ 'My-Class' + '(?:\\s|$)'), ' ');
  

  回复于 2024-04-20T19:57:32+08:00
• 801

  div.classList.add("foo");
  div.classList.remove("foo");
  

  更多https://developer.mozilla.org/en-US/docs/Web/API/element.classList

  回复于 2024-04-20T19:57:32+08:00
• 4

  还有 $.toggleClass ， $.addClass 和 $.removeClass . 有关文档，请查看http://api.jquery.com/toggleClass/ .

  看看这个jsFiddle example，看看它在行动 .

  回复于 2024-04-20T19:57:32+08:00
• -4

  我想这很简单 .

  document.getElementById("whatever").classList.remove("className");
  

  回复于 2024-04-20T19:57:32+08:00
• 31

  尝试：

  function removeClassName(elem, name){
      var remClass = elem.className;
      var re = new RegExp('(^| )' + name + '( |$)');
      remClass = remClass.replace(re, '$1');
      remClass = remClass.replace(/ $/, '');
      elem.className = remClass;
  }
  

  回复于 2024-04-20T19:57:32+08:00
• -5

  function hasClass(ele,cls) {
      return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
  }
  
  function removeClass(ele,cls) {
          if (hasClass(ele,cls)) {
              var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
              ele.className=ele.className.replace(reg,' ');
          }
      }
  

  回复于 2024-04-20T19:57:32+08:00
• 15

  Edit

  好的，完全重写 . 已经有一段时间了，我已经学到了一点，这些评论也有所帮助 .

  Node.prototype.hasClass = function (className) {
      if (this.classList) {
          return this.classList.contains(className);
      } else {
          return (-1 < this.className.indexOf(className));
      }
  };
  
  Node.prototype.addClass = function (className) {
      if (this.classList) {
          this.classList.add(className);
      } else if (!this.hasClass(className)) {
          var classes = this.className.split(" ");
          classes.push(className);
          this.className = classes.join(" ");
      }
      return this;
  };
  
  Node.prototype.removeClass = function (className) {
      if (this.classList) {
          this.classList.remove(className);
      } else {
          var classes = this.className.split(" ");
          classes.splice(classes.indexOf(className), 1);
          this.className = classes.join(" ");
      }
      return this;
  };
  

  ---

  Old Post

  我刚刚做这样的事情 . 这是我提出的解决方案......

  // Some browsers don't have a native trim() function
  if(!String.prototype.trim) {
      Object.defineProperty(String.prototype,'trim', {
          value: function() {
              return this.replace(/^\s+|\s+$/g,'');
          },
          writable:false,
          enumerable:false,
          configurable:false
      });
  }
  // addClass()
  // first checks if the class name already exists, if not, it adds the class.
  Object.defineProperty(Node.prototype,'addClass', {
      value: function(c) {
          if(this.className.indexOf(c)<0) {
              this.className=this.className+=' '+c;
          }
          return this;
      },
      writable:false,
      enumerable:false,
      configurable:false
  });
  // removeClass()
  // removes the class and cleans up the className value by changing double 
  // spacing to single spacing and trimming any leading or trailing spaces
  Object.defineProperty(Node.prototype,'removeClass', {
      value: function(c) {
          this.className=this.className.replace(c,'').replace('  ',' ').trim();
          return this;
      },
      writable:false,
      enumerable:false,
      configurable:false
  });
  

  现在你可以拨打 myElement.removeClass('myClass')

  或链接它： myElement.removeClass("oldClass").addClass("newClass");

  回复于 2024-04-20T19:57:32+08:00
• 9

  所有这些答案都太复杂了，试试吧

  var string = "Hello, whats on your mind?";
  var new_string = string.replace(', whats on your mind?', '');
  

  结果将是字符串的返回

  Hello
  

  超级容易 . 积分转到jondavidjohn Remove portion of string in Javascript

  回复于 2024-04-20T19:57:32+08:00
• 41

  我使用这个JS片段代码：

  首先，我根据目标类的索引到达所有类，我设置 className = "" .

  Target = document.getElementsByClassName("yourClass")[1];
  Target.className="";
  

  回复于 2024-04-20T19:57:32+08:00
• 56

  var element = document.getElementById('example_id');
  var remove_class = 'example_class';
  
  element.className = element.className.replace(' ' + remove_class, '').replace(remove_class, '');
  

  回复于 2024-04-20T19:57:32+08:00
• 26

  document.getElementById("whatever").className += "classToKeep";
  

  使用加号（''）附加类而不是覆盖任何现有类

  回复于 2024-04-20T19:57:32+08:00