How to stop function overwriting javascript object property and add new property instead?

Question

How can I add a new property for each element without overwriting the last property? H2 backgroundColor is overwriting H2 color in this example:

var cssObject = {}

function updateAllCSS(element, property, value) {

        cssObject[element] = [property] 
        cssObject[element][property] = value            

}

updateAllCSS('h2', 'color', '#000')
updateAllCSS('h2', 'backgroundColor', '#FFF')


console.log(cssObject.h2.color)

Any help would be amazing :)

I'd recommend against setting styles via JavaScript, and instead suggest adding/removing classes. Styles belong in stylesheets. — zzzzBov
– zzzzBov, Commented Sep 21, 2012 at 15:05
Note that your code is flawed (apart from your question). cssObject[element] = [property] assigns an array to cssObject[element] with one element. cssObject[element][property] otoh sets the property property of that array to a certain value. You end up with an array having one element and a custom property with the same name, i.e. your array looks like {0: 'color', 'color': '#000', length: 1}. The MDN JavaScript Guide provides a good introduction to objects and arrays. — Felix Kling
– Felix Kling, Commented Sep 21, 2012 at 15:06

Denys Séguret · Accepted Answer · 2012-09-21 15:04:56Z

3

Create a new cssObject[element] if you don't have one.

function updateAllCSS(element, property, value) {
   if (!cssObject[element]) cssObject[element] = {};
   cssObject[element][property] = value            
}

answered Sep 21, 2012 at 15:04

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

1 Comment

Joe Over a year ago

thanks so much, I can now build a CMS stylesheet with this data structure :)

aksinghdce · Accepted Answer · 2012-09-21 15:10:22Z

0

Use jQuery. It makes it very simple and is really very powerful in manipulation activity. In jquery it can be done like this.

Include jquery plugin library in your code using the script tag

now you can edit the properties of html elements like this:

$("#IdOfTheElement").attr("NewProperty","NewValue");

Its that simple.

answered Sep 21, 2012 at 15:10

aksinghdce

1931 silver badge12 bronze badges

2 Comments

Felix Kling Over a year ago

Setting styles without jQuery is already simple enough... recommending jQuery here does not help the OP to understand their mistake.

Joe Over a year ago

i'm using this to create a stylesheet

Collectives™ on Stack Overflow

How to stop function overwriting javascript object property and add new property instead?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related