Setting multiple attributes for an element at once with JavaScript

Question

How can I set multiple attributes at once with JavaScript? Unfortunately, I'm not able to use a framework like jQuery on this project. Here is what I have now:

var elem = document.createElement("img");  elem.setAttribute("src", "http://example.com/something.jpeg"); elem.setAttribute("height", "100%"); elem.setAttribute("width", "100%"); 

Answer 1

You could make a helper function:

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

Call it like this:

setAttributes(elem, {"src": "http://example.com/something.jpeg", "height": "100%", ...}); 

Answer 2

You might be able to use Object.assign(...) to apply your properties to the created element. Although some "properties (elem.height etc.) are read-only, i.e. accessors with only a getter (undefined setter)."

Keep in mind that height and width attributes are defined in pixels, not percents. You'll have to use CSS to make it fluid.

var elem = document.createElement('img') Object.assign(elem, {   className: 'my-image-class',   src: 'https://dummyimage.com/320x240/ccc/fff.jpg',   height: 120, // pixels   width: 160, // pixels   onclick: function () {     alert('Clicked!')   } }) document.body.appendChild(elem)  // One-liner: // document.body.appendChild(Object.assign(document.createElement(...), {...}))

.my-image-class {   height: 100%;   width: 100%;   border: solid 5px transparent;   box-sizing: border-box }  .my-image-class:hover {   cursor: pointer;   border-color: red }  body { margin:0 }