addClass 函数 | CSS-Tricks

如果您不使用任何库，则可能需要像这样编写自己的函数。

function addClass(id,new_class){
       var i,n=0;

       new_class=new_class.split(",");

       for(i=0;i<new_class.length;i++){
               if((" "+document.getElementById(id).className+" ").indexOf(" "+new_class[i]+" ")==-1){
                       document.getElementById(id).className+=" "+new_class[i];
                       n++;
               }
       }

       return n;
}

用法

<div id="changeme" class="big red"></div>
<button onclick="addClass('changeme', 'round')">Add a class</button>

Liam Goodacre

# 2012年1月7日

现代浏览器具有“classList”dom 元素属性

element.classList.add('classname');

还存在针对 IE 8+ 的修复程序，更多信息请参见此处： developer.mozilla.org/en/DOM/element.classList

此外，在 html 元素中内联使用 JavaScript 是一种不好的做法，约定是通过事件处理程序附加它。

这可能是一个可行的替代方案

var addClass = function(_element, _classes) {
  var classList, item, _i, _len;
  classList = _element.classList;
  for (_i = 0, _len = classes.length; _i < _len; _i++) {
    item = classes[_i];
    classList.add(item);
  }
  return _element;
};

Liam Goodacre

# 2012年1月7日

抱歉，我的代码中有一个小错误

var addClass = function(_element, _classes) {
  var classList, item, _i, _len;
  classList = _element.classList;
  for (_i = 0, _len = _classes.length; _i < _len; _i++) {
    item = _classes[_i];
    classList.add(item);
  }
  return _element;
};

此外，这将按如下方式执行

addClass(element, ['class1', 'class2']);

# 2014年5月16日

@Liam：很棒的代码！通过添加一个切换功能对其进行了稍微调整。这样我就可以添加/删除类。在我的例子中，用于显示/隐藏表格中的同级元素。

var addClass = function(_element, _classes) {
    var classList, item, _i, _len;
    classList = _element.classList;
    for (_i = 0, _len = _classes.length; _i < _len; _i++) {
        item = _classes[_i];
        if (classList.length <= _len) {
            classList.add(item);
        } else {
            classList.remove(item);
        }
    }
    return _element;
    };

Mathias Bynens

# 2012年1月8日

此代码片段假设使用 U+0020 空格来分隔类名。虽然这在大多数情况下可能有效，但需要注意的是 HTML 中不止一个空格字符。

nonae

# 2012年1月18日

@不喜欢它的人

简单地不要使用它。没有人强迫你使用它。

我认为这是一个很棒的代码片段。“”+word+”” 搜索非常棒，这完全可以防止任何意外结果。

我喜欢这个网站，我真没想到他们会放我的代码片段

nonae

评论永久链接# 2012年1月18日

他们没有解释“return n;” 是什么作用。

它只是为了知道成功添加了多少个类。该选项对我来说很方便（如果有人真的不打算使用它，那么只需删除该行即可）

Thabang

# 2014年6月6日

如果我想在某些其他元素上添加类时自动删除这些类，该怎么办？

mingzhanghui

# 2018年3月29日

// hasClass
HTMLElement.prototype.hasClass = function(name) {
    return this.className.match(new RegExp('(\\s|^)'+name+'(\\s|$)'));
};

// addClass
HTMLElement.prototype.addClass = function(new_class) {   
    var nc = new_class.split(",");

    for (var i = 0; i < nc.length; i++) {
        if ((" " + this.className + " ").indexOf(" " + nc[i] + " ") == -1) {
            this.className += " " + nc[i];
        }
    }
    return this;
};
HTMLElement.prototype.removeClass = function(name) {
  if (this.hasClass(name)) {
    var reg = new RegExp('(\\s|^)'+name+'(\\s|$)');
    this.className = this.className.replace(reg,' ');
  }
  return this;
};

用法

评论

发表评论 取消回复

发表评论取消回复