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

Answer 3

If you are adding styles you can set them directly using the style attribute:

var foo = document.getElementById('foo');

foo.style.backgroundColor = 'red';
foo.style.width = '400px';
foo.style.height = '500px';
foo.style.fontWeight = 'bold';

Answer 4

When you use setAttribute , you're replacing the entire style attribute, so you lose any styles that are already there. You need to concatenate your addition to the old style.

oldStyle = styled.getAttribute('style');
styled.setAttribute('style', oldStyle + 'color: red;');

But it's simpler to use the sub-properties of the style property:

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

If you need to get the style name from a variable, you can use array notation:

styleName = 'color';
styleValue = 'red';
styled.style[styleName] = styleValue;