Add css attribute to element

Question

I want to add CSS attributes to my element, but my current solution loses all previous attributes that had an impact on the element.

function checkNr(id) {   var value = document.getElementById(id).value;   if (parseFloat(value) == NaN) {     document.getElementById(id).setAttribute("style", "border:2px solid red; background-color: rgb(255, 125, 115);");   }   else {     document.getElementById(id).setAttribute("style", "border:default; background-color: rgb(255, 255, 255);");   } } 

Before using this method the element already had the attributes:

float: left; width: 50px; 

Afterwards, the element loses these attributes, leaving only the specific attributes from the JavaScript method. So, I want to add attributes without replacing them.

Answer 1

Setting the style attribute like that, overwrites the attribute and removes previously set styles.

What you really should do is set the styles directly instead by changing the style property :

function checkNr(id) {     var elem  = document.getElementById(id),         value = elem.value;     if (parseFloat(value) == NaN) {         elem.style.border = '2px solid red';          elem.style.backgroundColor = 'rgb(255, 125, 115)';     } else {         elem.style.border = 'none';          elem.style.backgroundColor = 'rgb(255, 255, 255)';     } } 

Answer 2

function checkNr(id) {     var elem = document.getElementById(id);     var css = {};     if (parseFloat(elem.value) == NaN) {         css = { border: '2px solid red', backgroundColor: 'rgb(255, 125, 115)' };     } else {         css = { border: 'none', backgroundColor: 'rgb(255, 255, 255)' };     }      Object.assign(elem.style, css); }