Append new attribute with setAttribute()?

Question

I have a div element and would like to append new style attributes to it. I have tried to do it like this:

element.setAttribute('style', 'property: value');

And it works, but if that element already had styles applied, they will all get overwritten.

Lets say I have this situation:

HTML:

<div id="styled"></div>

JavaScript:

var styled = document.getElementById('styled');
styled.setAttribute('style', 'display: block');

This works, but if I need to append another style lets say:

styled.setAttribute('style', 'color: red');

I would then lose style added in previous setAttribute() method!

How can one append styles to elements with JavaScript?

Thanks!

Answer 1

Well, if using setAttribute you could just take the previous value by getAttribute and concat them:

 element.setAttribute('style', element.getAttribute('style')+'; color: red');

However, that's not the best practise for most HTML attributes, which are usually reflected as a property and you could just do something like element.className += " …". For inline styles in particular, you'd use the .style property that allows you to set and unset every single CSS property:

element.style.display = 'block';
element.style.color = 'red';

Answer 2

Update the style object of the dom-node rather than using setAttribute:

document.getElementById("styled").style["color"] = "red";

More information: http://www.w3schools.com/jsref/dom_obj_style.asp