CODEWITHSUNDEEP
javascripthtmlcssarrayssetattribute
Alex
Alex

Reputation: 63

Javascript setAttribute from Array

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.

Upvotes: 2

Views: 9467

Answers (3)

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20944

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:

// Becomes 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 complete 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 accomplish 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.

// Becomes 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.

Upvotes: 1

epascarello
epascarello

Reputation: 207521

From the comments, 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]);

Upvotes: 1

TheZ
TheZ

Reputation: 3732

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.

Upvotes: 0

Related Questions