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!

Bergi · Accepted Answer · 2016-02-04 00:57:04Z

36

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';

answered Feb 4, 2016 at 0:57

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

4 Comments

Kebman Over a year ago

Using setAttribute for changing the style is a bad hack.

ey dee ey em Over a year ago

what? this is brilliant!!!!!!!! Yes simple, but darn smart!!! We 'hack' stuff when there is no other way. if someone has better way, should be posting it as answer, instead of simply round up a solution as a "hack"

Bergi Over a year ago

@Ezeewei There is another way, even a better one, and it's mentioned right in the answer :-)

ey dee ey em Over a year ago

Actually for my specific case, this is the only solution work scalably. I know all the other ways but they are not what I want to do but actually your approach is what I never thought of! hehe

Jonathan.Brink · Accepted Answer · 2016-02-04 00:55:32Z

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

answered Feb 4, 2016 at 0:55

Jonathan.Brink

25.3k20 gold badges85 silver badges127 bronze badges

1 Comment

Qui-Gon Jinn Over a year ago

Thanks Jo! Great solution! Its works great for me to add another attribute to style without deleting the old values.

Ron Sims II · Accepted Answer · 2016-02-04 01:00:26Z

1

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';

answered Feb 4, 2016 at 1:00

Ron Sims II

8068 silver badges12 bronze badges

Comments

Barmar · Accepted Answer · 2016-02-04 00:57:40Z

0

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;

answered Feb 4, 2016 at 0:57

Barmar

789k57 gold badges555 silver badges669 bronze badges

Collectives™ on Stack Overflow

Append new attribute with setAttribute()?

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related