有没有一种方法可以使用classList在一条指令中添加/删除多个类?

2020/10/23 14:42 · javascript ·  · 0评论

到目前为止,我必须这样做:

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

尽管这在jQuery中是可行的,但是像这样

$(elem).addClass("first second third");

我想知道是否有任何本地方法可以添加或删除。

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

是平等的

elem.classList.add("first","second","third");

新的传播运算符使将多个CSS类作为数组应用更加容易:

const list = ['first', 'second', 'third'];
element.classList.add(...list);

classList属性确保不必将重复的类不必要地添加到元素中。为了保持这个功能,如果你不喜欢的手写版本或jQuery的版本,我建议增加一个addMany功能,并removeManyDOMTokenList(类型classList):

DOMTokenList.prototype.addMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.add(array[i]);
    }
}

DOMTokenList.prototype.removeMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.remove(array[i]);
    }
}

这些就可以这样使用:

elem.classList.addMany("first second third");
elem.classList.removeMany("first third");

更新资料

根据您的评论,如果您只希望在未定义它们的情况下为其编写自定义方法,请尝试以下操作:

DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function(classes) {...}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function(classes) {...}

由于Just中add()方法classList允许传递单独的参数而不是单个数组,因此您需要add()使用apply进行调用对于第一个参数,您将需要传递classList来自相同DOM节点引用,第二个参数是您要添加的类的数组:

element.classList.add.apply(
  element.classList,
  ['class-0', 'class-1', 'class-2']
);

你可以像下面这样

elem.classList.add("first", "second", "third");

去掉

elem.classList.remove("first", "second", "third");

参考

TLDR;

在直接的情况下,上述移除应该有效。但是,如果将其删除,则应确保在删除它们之前存在类

const classes = ["first","second","third"];
classes.forEach(c => {
  if (elem.classList.contains(c)) {
     element.classList.remove(c);
  }
})

向元素添加类

document.querySelector(elem).className+=' first second third';

更新:

删除课程

document.querySelector(elem).className=document.querySelector(elem).className.split(class_to_be_removed).join(" ");

在较新版本的DOMTokenList规范允许多个参数add()remove(),以及第二个参数给toggle()到受力状态。

在写这篇文章的时候,Chrome支持多参数add()remove(),但没有其他浏览器的事。IE 10和更低版本,Firefox 23和更低版本,Chrome 23和更低版本以及其他浏览器不支持的第二个参数toggle()

我写了以下小的polyfill来帮助我解决问题,直到支持范围扩大:

(function () {
    /*global DOMTokenList */
    var dummy  = document.createElement('div'),
        dtp    = DOMTokenList.prototype,
        toggle = dtp.toggle,
        add    = dtp.add,
        rem    = dtp.remove;

    dummy.classList.add('class1', 'class2');

    // Older versions of the HTMLElement.classList spec didn't allow multiple
    // arguments, easy to test for
    if (!dummy.classList.contains('class2')) {
        dtp.add    = function () {
            Array.prototype.forEach.call(arguments, add.bind(this));
        };
        dtp.remove = function () {
            Array.prototype.forEach.call(arguments, rem.bind(this));
        };
    }

    // Older versions of the spec didn't have a forcedState argument for
    // `toggle` either, test by checking the return value after forcing
    if (!dummy.classList.toggle('class1', true)) {
        dtp.toggle = function (cls, forcedState) {
            if (forcedState === undefined)
                return toggle.call(this, cls);

            (forcedState ? add : rem).call(this, cls);
            return !!forcedState;
        };
    }
})();

符合ES5的现代浏览器DOMTokenList是可以预期的,但是我在几个特定的​​目标环境中使用了这种polyfill,因此它对我来说非常有用,但是可能需要调整将在旧版浏览器环境(例如IE 8和更低版本)中运行的脚本。

这是针对IE 10和11用户的一种解决方法,似乎很简单。

var elem = document.getElementById('elem');

['first','second','third'].forEach(item => elem.classList.add(item));
<div id="elem">Hello World!</div>

要么

var elem = document.getElementById('elem'),
    classes = ['first','second','third'];

classes.forEach(function(item) {
    return elem.classList.add(item);
});
<div id="elem">Hello World!</div>

我必须要相信的一个非常简单,不花哨但有效的解决方案是跨浏览器:

创建此功能

function removeAddClasses(classList,removeCollection,addCollection){
    for (var i=0;i<removeCollection.length;i++){ 
        classList.remove(removeCollection[i]); 
    }
    for (var i=0;i<addCollection.length;i++){ 
        classList.add(addCollection[i]); 
    }
}

这样称呼它:removeAddClasses(node.classList,arrayToRemove,arrayToAdd);

...其中arrayToRemove是要删除的类名称的数组:['myClass1','myClass2']等

...和arrayToAdd是要添加的类名称的数组:['myClass3','myClass4']等

标准定义仅允许添加或删除单个类。几个小型包装函数可以满足您的要求:

function addClasses (el, classes) {
  classes = Array.prototype.slice.call (arguments, 1);
  console.log (classes);
  for (var i = classes.length; i--;) {
    classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
    for (var j = classes[i].length; j--;)
      el.classList.add (classes[i][j]);
  }
}

function removeClasses (el, classes) {
  classes = Array.prototype.slice.call (arguments, 1);
  for (var i = classes.length; i--;) {
    classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
    for (var j = classes[i].length; j--;)
      el.classList.remove (classes[i][j]);
  }
}

这些包装器允许您将类列表指定为单独的参数,带空格或逗号分隔的项目的字符串或组合。有关示例,请参见http://jsfiddle.net/jstoolsmith/eCqy7

假设您要添加一系列的类,则可以使用ES6扩展语法:


let classes = ['first', 'second', 'third'];
elem.classList.add(...classes);

我喜欢@ rich.kelly的答案,但我想使用与classList.add()(逗号分隔的字符串)相同的命名法,所以略有偏差。

DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function() {
  for (var i = 0; i < arguments.length; i++) {
    this.add(arguments[i]);
  }
}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function() {
  for (var i = 0; i < arguments.length; i++) {
    this.remove(arguments[i]);
  }
}

因此,您可以使用:

document.body.classList.addMany('class-one','class-two','class-three');

我需要测试所有浏览器,但这在Chrome上有效。

我们是否应该检查比存在的东西更具体的东西
DOMTokenList.prototype.addMany究竟是什么导致classList.add()IE11失败?

另一个填充工具element.classList在这里我是通过MDN找到的

我包括该脚本并按element.classList.add("first","second","third")预期使用。

在字符串中添加多个由空格分隔的类的更好方法是使用Spread_syntaxsplit

element.classList.add(...classesStr.split(" "));
本文地址:http://javascript.askforanswer.com/youmeiyouyizhongfangfakeyishiyongclasslistzaiyitiaozhilingzhongtianjia-shanchuduogelei.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!