Question

我有一个带有类的css文件和一个包含这些类的数组：

myArray[0] = myClass1
myArray[1] = myClass2
// etc...

我现在尝试了几种方法，并搜索了如何setAttribute()类存储在我的数组中的类的答案。基本上我需要做的是：

myElement.setAttribute("class",myClass1);

但我无法弄清楚如何。

修改

也许我应该更清楚，但除了在“”中输入类名外的任何内容都不起作用。基本上我所拥有的是一个数组和一个带有数组随机类名的变量。我想使用setAttribute（）将类名设置为该变量。

Answer 1

从评论中，您说您要从数组中分配值。它很简单：

var myClasses = [];
myClasses[0] = "myClass1";
myClasses[1] = "myClass2";

myElement.className = myClasses[1];

使用setAttribute来设置CSS类并不简单，因为存在浏览器怪癖。使用.className适用于所有浏览器。如果不是，你必须做一些精彩的嗅探，以确定setAttribute是否适用于class或className，或者你是否会像以下一样加倍。

var myClasses = [];
myClasses[0] = "myClass1";
myClasses[1] = "myClass2";

myElement.setAttribute("class", myClasses[1]);
myElement.setAttribute("className", myClasses[1]);

Answer 2

您可以通过将字符串设置或附加到元素的className属性来添加类：

if(myElement.className){
    myElement.className += " "+myClass1;
}else{
    myElement.className = myClass1;
}

如果定义了上一个类，则会有空格，因为我们不希望意外地使用oldClassnewClass而不是正确的oldClass newClass。

Answer 3

好的。这个问题已经很老了，但是只是为了练习在此处回答关于stackoverflow的答案，并帮助任何可能在此页面上绊倒的人。您可以（或应该使用）几种方法来更改 HTMLElement （所选元素）上的class属性。

考虑Alex交付的代码。

var myArray = [];   // A new array.
myArray[0] = 'foo'; // With 'foo' on 0
myArray[1] = 'bar'; // and 'bar' on 1.

这将创建一个具有键0和值'foo'以及键1具有值'bar'的酷数组。这些是我们要作为单个字符串放在类中的值。就像我们在编写HTML时应该输入class属性一样。

您可以通过将数组连接到单个字符串并将其分配给元素的className属性来实现。像这样：

// Becomes something like
// myElement.className = "foo bar";
myElement.className = myArray.join(' ');

array的{{3}}方法返回根据数组值创建的string。在这种情况下，我们返回的string用空格分隔。然后，该字符串用于更改元素的完整className值。

您还可以遍历数组，并将数组中每个键的值分配给元素的类。您可以使用for循环并使用element的classList属性来完成此操作。 classList属性访问对元素类的控制。它们具有操作类的方法，例如add。

for(var i = 0; i < myArray.length; i++) {
    myElement.classList.add(myArray[i]); // i representing each key in array
}

您现在一个一个地将所有类添加到element中。执行此操作的另一种方法是使用数组的join方法。 forEach方法遍历array中的每个键并使其值可用。现代浏览器支持此功能。 forEach

myArray.forEach(function(cls) { // cls representing each value of myArray.
    myElement.classList.add(cls);
});

或者使用 ES6 和caniuse reference进行几乎相同的操作，但是使用另一种方式写下功能。

myArray.forEach(cls => { // cls representing each value of myArray.
    myElement.classList.add(cls);
});

大约相同的过程，但具有不同的样式，称为函数式编程。令人兴奋的东西！

您想做更多的 ES6 吗？尝试arrow function syntax。简而言之，散布运算符可以将数组中的每个键分别布置到一个方法中。 add对象的classList方法支持多个参数。这样。

// Becomes something like 
// myElement.classList.add("foo", "bar");
myElement.classList.add(...myArray);

选择一个选项。确定其中哪些适合您的项目。您需要古老的浏览器支持吗？使用第一个示例。下一个示例更为现代，依此类推。不明白它的意思是什么？尝试阅读可能找到的文档和示例，直到单击为止。我已经尝试过用我认为足够多的文档来支持我的示例。

请阅读Mozilla开发人员网络的这些文档，其中解释了元素的spread operator syntax和classList属性，以及您可以使用它们做什么。

它们是学习如何使用JavaScript进行DOM操作的基本部分。 className。

来自Array的Javascript setAttribute

3 个答案: