我有一个CSS文件,其中包含类和一个数组,这些类的存储方式如下:
myArray[0] = myClass1
myArray[1] = myClass2
// etc...
我已经尝试了几种方法,并寻找如何setAttribute()
类到我的数组中存储的类的答案。基本上我需要做的是:
myElement.setAttribute("class",myClass1);
但我想不出是怎么回事。
除了在""
中输入className
外,其他任何操作都不起作用,基本上我拥有的是一个数组和一个从数组中随机选择className
的变量,我想使用setAttribute()
将className
设置为该变量。
3条答案
按热度按时间eyh26e7m1#
从注解中,你说你想从数组中赋值。它就像这样简单:
使用
setAttribute
来设置CSS类并不简单,因为浏览器有一些怪癖。使用.className
可以在所有浏览器中工作。如果不能,你必须做一些奇妙的嗅探来判断setAttribute
是否可以与class
或className
一起工作,或者像下面这样加倍。w51jfk4q2#
好的。这个问题很老了,但只是为了练习如何回答stackoverflow上的问题,并帮助其他可能会在这个页面上遇到问题的人。这里有一些方法可以(也有一些是应该)用来修改HTMLElement(您选择的元素)上的class属性。
把代码当成亚历克斯送的。
这就产生了一个很酷的数组,其中键为0,值为'foo',键为1,值为'bar'。这些值是我们希望作为单个字符串放在类中的值。就像我们在编写HTML时应该键入class属性一样。
你可以通过将数组连接到一个字符串并将其赋给元素的className属性来实现。
array
的join方法返回从数组值创建的string
。在本例中,返回的string
用空格分隔。然后字符串用于更改元素的完整className
值。你也可以循环数组,并将数组中每个键的值赋给元素的类。你可以通过使用
for
循环和元素的classList
属性来实现这一点。classList
属性访问对元素类的控制。它们有操作类的方法,如add
。现在,您已经一个接一个地将所有类添加到元素中。另一种方法是使用数组的forEach方法。
forEach
方法循环array
中的每个键,并使其值可用。现代浏览器支持此功能。caniuse参考或者使用ES6和arrow function syntax来做几乎相同的事情,但是用另一种方式来编写函数。
过程大致相同,但风格不同,称为函数式编程。令人兴奋的东西!
你想做更多的ES6吗?试试spread operator syntax。简单地说,spread操作符可以将数组的每个键单独放置到一个方法中。
classList
对象的add
方法支持多个参数。就像这样。选择一个选项。决定其中哪些适合您的项目。您需要古老的浏览器支持吗?使用第一个示例。下一个示例更现代,依此类推。不理解它的作用或含义吗?尝试阅读您可以找到的文档和示例,直到它单击。我尝试使用我认为有意义的尽可能多的文档来支持我的示例。
阅读Mozilla开发者网络的这些文档,这些文档解释了元素的classList和className属性提供了什么,以及可以使用它们做什么。
它们是学习如何使用JavaScript进行DOM操作的基础部分。站点文章解释DOM操作的基础。
u2nhd7ah3#
可以通过设置或将字符串追加到元素的
className
属性来添加类:这个空格是为了防止前面定义了一个类,因为我们不想意外地得到类似
oldClassnewClass
的结果,而不是正确的oldClass newClass
。