html - Javascript setAttribute from Array - Stack Overflow

admin管理员组

文章数量:1415476

I have a CSS file with classes and an array with these classes stored as such:

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

I have tried several methods and searched for an answer on how to setAttribute() class to the classes stored in my array. Basically what I need to do is:

myElement.setAttribute("class",myClass1);

But I cannot figure out how.

Anything except typing out the className inside "" doesn't work. Basically what I have is an array and a variable with a random className from the array. I want to set the className using setAttribute() to that variable.

I have a CSS file with classes and an array with these classes stored as such:

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

I have tried several methods and searched for an answer on how to setAttribute() class to the classes stored in my array. Basically what I need to do is:

myElement.setAttribute("class",myClass1);

But I cannot figure out how.

Anything except typing out the className inside "" doesn't work. Basically what I have is an array and a variable with a random className from the array. I want to set the className using setAttribute() to that variable.

• javascript
• html
• css
• arrays
• setattribute

Share Improve this question Follow edited Mar 7, 2023 at 20:27 Andi 3,00255 gold badges1616 silver badges3636 bronze badges asked Oct 4, 2012 at 15:49 AlexAlex 6322 silver badges55 bronze badges 7

• So you want to set all of the classes to as a class attribute? – benqus Commented Oct 4, 2012 at 15:51
• myElement.className = myClass1; – Shmiddty Commented Oct 4, 2012 at 15:51
• Access them like in your assignment, .setAttribute("class", myArray[0])? – Bergi Commented Oct 4, 2012 at 15:52
• 2 Wele to Stack Overflow; please read the faq. One thing to note, we don't care how long you've been searching, we care about what you've tried. – zzzzBov Commented Oct 4, 2012 at 15:53
• @Alex: Is myClass1 a string literal, is it a variable? Should be a string but isn't? – Bergi Commented Oct 4, 2012 at 15:53

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 1

From the ments, you say you want to assign a value from the array. It is as simple as:

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

myElement.className = myClasses[1];

Using setAttribute with to set the CSS class is not straightforward since there are browser quirks. Using .className works in all browsers. If not you have to do some wonderful sniffing to figure out if setAttribute works with class or className or you double up like the following.

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

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

Okay. This question is quite old, but just for the sake of practicing on answering an answer here on stackoverflow and help any others that might stumble on this page. Here are a few ways you could (and some that you should) use for changing the class attribute on an HTMLElement (the element you selected).

Considering the code as Alex delivered.

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

This makes a cool array with a key 0 and value 'foo' and a key 1 with the value 'bar'. These are the values we want to put on in the class as a single string. Just like as we should type in a class attribute when writing HTML.

You could do that by joining the array to a single string and assigning it to the className attribute of the element. Like so:

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

The join method of an array returns a string created from the values of the array. In this case, our returned string is separated by spaces. The string is then used to change the plete className value of the element.

You could also loop over the array and assigning the value of each key in the array to class of the element. You can acplish this by using a for loop and use the classList property of element. The classList property accesses control over the classes of the element. They have methods to manipulate the classes, like add.

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

One by one, you now have added all the classes to the element . Another way of doing this is to use the forEach method of an array. The forEach method loops over each key in the array and makes it value available. Modern browsers support this functionality. caniuse reference

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

Or use ES6 and the arrow function syntax to do practically the same but with another way of writing down functions.

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

About the same process but with a different style called functional programming. Exciting stuff!

You want to do more ES6? Try the the spread operator syntax. Simply put, the spread operator can lay out each key, individually, of an array into a method. And the add method of the classList object supports multiple arguments. Like this.

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

Pick an option. Decide which of these are suitable for your project. You need ancient browser support? Use the first example. The next example is more modern and so on. Don't understand what it does or mean? Try reading up on documentation and examples you can find until it clicks. I've tried to support my examples with as much documentation as I thought would make sense.

Read up on these documents of Mozilla Developer Network which explain what the classList and className properties of an element offer and what you can do with them.

They are a fundamental part in learning how to use JavaScript for DOM Manipulation. Sitepoint article explaining the basics of DOM Manipulation.

You can add a class by setting or appending the string to the element's className property:

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

The space is there in case there is a previous class defined since we wouldn't want to accidentally end up with something like oldClassnewClass instead of the correct oldClass newClass.

本文标签： htmlJavascript setAttribute from ArrayStack Overflow