css 数组中的Javascript setAttribute

jgovgodb  于 2023-03-09  发布在  Java
关注(0)|答案(3)|浏览(91)

我有一个CSS文件,其中包含类和一个数组,这些类的存储方式如下:

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

我已经尝试了几种方法,并寻找如何setAttribute()类到我的数组中存储的类的答案。基本上我需要做的是:

myElement.setAttribute("class",myClass1);

但我想不出是怎么回事。
除了在""中输入className外,其他任何操作都不起作用,基本上我拥有的是一个数组和一个从数组中随机选择className的变量,我想使用setAttribute()className设置为该变量。

eyh26e7m

eyh26e7m1#

从注解中,你说你想从数组中赋值。它就像这样简单:

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

myElement.className = myClasses[1];

使用setAttribute来设置CSS类并不简单,因为浏览器有一些怪癖。使用.className可以在所有浏览器中工作。如果不能,你必须做一些奇妙的嗅探来判断setAttribute是否可以与classclassName一起工作,或者像下面这样加倍。

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

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

w51jfk4q2#

好的。这个问题很老了,但只是为了练习如何回答stackoverflow上的问题,并帮助其他可能会在这个页面上遇到问题的人。这里有一些方法可以(也有一些是应该)用来修改HTMLElement(您选择的元素)上的class属性。
把代码当成亚历克斯送的。

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(' ');

arrayjoin方法返回从数组值创建的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参考

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

或者使用ES6arrow function syntax来做几乎相同的事情,但是用另一种方式来编写函数。

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

过程大致相同,但风格不同,称为函数式编程。令人兴奋的东西!
你想做更多的ES6吗?试试spread operator syntax。简单地说,spread操作符可以将数组的每个键单独放置到一个方法中。classList对象的add方法支持多个参数。就像这样。

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

选择一个选项。决定其中哪些适合您的项目。您需要古老的浏览器支持吗?使用第一个示例。下一个示例更现代,依此类推。不理解它的作用或含义吗?尝试阅读您可以找到的文档和示例,直到它单击。我尝试使用我认为有意义的尽可能多的文档来支持我的示例。
阅读Mozilla开发者网络的这些文档,这些文档解释了元素的classListclassName属性提供了什么,以及可以使用它们做什么。
它们是学习如何使用JavaScript进行DOM操作的基础部分。站点文章解释DOM操作的基础。

u2nhd7ah

u2nhd7ah3#

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

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

这个空格是为了防止前面定义了一个类,因为我们不想意外地得到类似oldClassnewClass的结果,而不是正确的oldClass newClass

相关问题