数组中的 Javascript setAttribute答案

【问题标题】：Javascript setAttribute from Array数组中的 Javascript setAttribute
【发布时间】：2012-10-04 15:49:15
【问题描述】：

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

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

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

myElement.setAttribute("class",myClass1);

但我不知道怎么做。

编辑：

也许我应该更清楚一点，但是除了在 "" 中输入类名之外的任何操作都不起作用。基本上我所拥有的是一个数组和一个具有来自数组的随机类名的变量。我想使用 setAttribute() 将类名设置为该变量。

【问题讨论】：

所以你想把所有的类都设置为一个类属性？
myElement.className = myClass1;
访问它们就像在你的作业中一样，.setAttribute("class", myArray[0])?
欢迎来到Stack Overflow;请阅读faq。需要注意的一件事，我们不在乎您搜索了多长时间，我们在乎的是what you've tried。
@Alex：myClass1 是字符串文字，是变量吗？应该是字符串，但不是？

标签： javascript css arrays class setattribute

【解决方案1】：

在 cmets 中，您说要从数组中分配一个值。很简单：

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

myElement.className = myClasses[1];

使用 setAttribute with 来设置 CSS 类并不简单，因为存在浏览器怪癖。使用 .className 可以在所有浏览器中使用。如果不是，你必须做一些美妙的嗅探来确定setAttribute 是否与class 或className 一起使用，或者你像下面这样加倍。

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

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

【讨论】：

如果myElement是数组怎么办？
一个循环...

【解决方案2】：

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

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

该空格是为了防止之前定义的类，因为我们不希望意外地以oldClassnewClass 之类的东西结束，而不是正确的oldClass newClass。

【讨论】：

【解决方案3】：

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

考虑到 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 时应该输入一个类属性一样。

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

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

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

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

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

您现在已将所有类添加到元素中。另一种方法是使用数组的forEach 方法。 forEach 方法循环遍历 array 中的每个键并使其值可用。现代浏览器支持此功能。 caniuse reference

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

或者使用 ES6 和 arrow function syntax 来做几乎相同的事情，但是用另一种写下函数的方式。

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

关于相同的过程，但具有不同的风格，称为函数式编程。令人兴奋的东西！

你想做更多的ES6？试试spread operator syntax。简而言之，扩展运算符可以将数组的每个键单独布置到方法中。而classList 对象的add 方法支持多个参数。像这样。

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

选择一个选项。确定其中哪些适合您的项目。您需要古老的浏览器支持吗？使用第一个示例。下一个例子更现代，依此类推。不明白它的作用或含义？尝试阅读您可以找到的文档和示例，直到点击为止。我试图用我认为有意义的尽可能多的文档来支持我的示例。

阅读 Mozilla Developer Network 的这些文档，其中解释了元素的 classList 和 className 属性提供了什么以及您可以使用它们做什么。

它们是学习如何使用 JavaScript 进行 DOM 操作的基础部分。 Sitepoint article explaining the basics of DOM Manipulation.

【讨论】：