Append Style to DOM not Replacing Existing

Question

How can I append style element to DOM without eliminating existing style on the item (eg color, text-align, etc)?

The event calls the function, but the problem is 'Style' gets completely replaced with the single item instead.

I have simple code triggered on the event:

function changeback(onoff) {
   if(onoff) {
      document.getElementById("field1").style.background="#fff";
   } else            
      document.getElementById("field1").style.background="#000";
}

That code is not the issue. Unless you are saying the other background properties are being overwritten, that code should NOT affect other properties of the Element's `style` object. — Randy the Dev, Sep 22 '10 at 10:45

score 10 · Answer 1 · edited May 07 '18 at 06:35

10

Here is how you can do it :

var elem = document.getElementById('YOUR ELEMENT ID');
elem.style.setProperty('border','1px solid black','');

elem.style is an object implementing the CSSStyleDeclaration interface which supports a setProperty function. If you check the style property in Firebug now, you will notice addition of the border property within the style attribute of the element.

edited May 07 '18 at 06:35

Sunil Garg

14,608
25
132
189

answered Sep 16 '10 at 17:16

Rajat

32,970
17
67
87

I'm trying to append to existing Style, not replace. Try adding a style to field1 then appending the color with javascript. It didn't do the trick. – Codex73 Sep 20 '10 at 11:37
Here is a jsFiddle example : http://jsfiddle.net/KAjf2/ The element has a style of "color:red" already to it. I append a "border" to the existing Style. Working in FF 3.5,Chrome – Rajat Sep 20 '10 at 18:38
@Codex73 `style.setProperty()` does not replace existing properties, it adds a new property. – TylerH Jun 24 '22 at 16:00

score 8 · Accepted Answer · answered Sep 16 '10 at 04:13

8

Which browser are you using? In Chrome, this works for me:

<html> 
<head> 
<style type="text/css"> 
  .test { background: #ff0000; font-family: "Verdana"; }
</style> 
<script type="text/javascript"> 
  function changeback(onoff)
  {
    if(onoff){
      document.getElementById("field1").style.background="#0f0";
    } else {
      document.getElementById("field1").style.background="#000";
    }
  }
 </script> 
 </head> 
 <body> 
   <h1>Test</h1> 
   <p id="field1" onclick="changeback(true);" class="test">This is a test</p> 
</body> 
</html>

When I click on the text, the background color changes, but the rest of the style (in this case, the font) stays the same.

Is that what you're trying to do?

answered Sep 16 '10 at 04:13

AaronM

693
5
18

I'm trying to append to existing Style, not replace. Try adding a style to field1 then appending the color with javascript. – Codex73 Sep 16 '10 at 11:28
1

@Codex73: Your comment makes no sense. The answer just changes the background color and leaves the rest of the style settings alone. What specifically is your problem? Which part of the style gets reset? – Aaron Digulla Sep 22 '10 at 09:28
1

Yes. Your completely right, minor code problem on my end. Thanks for your help, it works. – Codex73 Sep 22 '10 at 23:47

Append Style to DOM not Replacing Existing

2 Answers2

Linked