1

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

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

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

myElement.setAttribute("class",myClass1);

但我无法弄清楚如何。

编辑：

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

4

3 回答 3

1

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

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

myElement.className = myClasses[1];

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

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

myElement.setAttribute("class", myClasses[1]);
myElement.setAttribute("className", myClasses[1]);
于 2012-10-04T16:00:03.640 回答
0

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

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

空间是存在的，以防之前定义了一个类，因为我们不希望意外地得到类似的东西oldClassnewClass而不是正确的oldClass newClass.

于 2012-10-04T15:52:19.667 回答
0

好的。这个问题已经很老了，但只是为了练习在 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(' ');

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

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

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

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

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

或者使用ES6和箭头函数语法来做几乎相同的事情，但用另一种写下函数的方式。

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

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

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

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

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

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

它们是学习如何使用 JavaScript 进行 DOM 操作的基础部分。Sitepoint 文章解释了 DOM 操作的基础知识。

于 2019-08-03T18:10:25.137 回答