Home/ Questions/Q 1082791
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T22:21:00+00:00

How can I append style element to DOM without eliminating existing style on the

  • 0

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";
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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?

    • 0