Set Multiple HTML Attributes Using Class Attributes in JavaScript

Question

I've been able to achieve certain success with the following code to target id attributes using JavaScript to set multiple attributes:

function setAttributes(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}
setAttributes(svgShape,{'d':complexShape,'fill':'#f04'});

However, would it be possible to use that code or a similar code to target class attributes, not id attributes?

Do you mean if the element has been fetched by ID vs by Class? — Ibu
– Ibu, Commented May 23, 2016 at 0:09
Hi @fatRaspberry if my answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. — Joe Thomas
– Joe Thomas, Commented May 28, 2016 at 4:01

Joe Thomas · Accepted Answer · 2016-05-23 00:24:11Z

1

If you get the elements by their classname they come as an HTML element collection, therefore you must convert the class elements into an array and then iterate through them or use an Array call with a foreach:

Conversion to Array

function setAttributes(el, attrs) {
  var elements = [].slice.call(el);
  elements.forEach(function(element){
    for(var key in attrs) {
      element.setAttribute(key, attrs[key]);
  });
  }
}

Prototype Calling

function setAttributes(el, attrs) {
  [].forEach.call(el,function(element){
    for(var key in attrs) {
      element.setAttribute(key, attrs[key]);
    }
  });
}

edited May 23, 2016 at 0:24

answered May 23, 2016 at 0:16

Joe Thomas

6,5376 gold badges29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Set Multiple HTML Attributes Using Class Attributes in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related