Ich möchte meinem Element CSS-Attribute hinzufügen, aber meine aktuelle Lösung verliert alle vorherigen Attribute, die sich auf das Element ausgewirkt haben.

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

Vor Verwendung dieser Methode hatte das Element bereits die Attribute:

float: left;
width: 50px;

Danach verliert das Element diese Attribute, sodass nur noch die spezifischen Attribute aus der JavaScript-Methode übrig bleiben. Ich möchte also Attribute hinzufügen, ohne sie zu ersetzen.

Wenn Sie das Stilattribut so setzen, wird das Attribut überschrieben und zuvor festgelegte Stile entfernt.

Was Sie wirklich tun sollten, ist, die Stile direkt festzulegen, indem Sie stattdessen die Eigenschaft style ändern:

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

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);
}

Der einfachste Weg ist für mich:

prev_style=obj.getAttribute("style");
added_style="background-color:red;"
if (prev_style==undefined || prev_style==null) { prev_style="" }
obj.setAttribute("style",prev_style+added_style);

oder mit jQuery

$(obj).attr("style",prev_style+added_style)

Wenn Sie das Stilattribut des Elements direkt festlegen, werden alle vorherigen Werte überschrieben:

element.setAttribute("style", "border: 2px solid red; /* ... */")

<div id="element" style="float: right; /* ... */">...</div>
<!-- becomes -->
<div id="element" style="border:; 2px solid red; /* ... */">...</div>

Legen Sie stattdessen jeweils eine Eigenschaft mithilfe von fest element.style.property = value Syntax:

const checkNr = id => {
  const element = document.getElementById(id)
  const isNotNum = isNaN(parseFloat(element.value))
  element.style.background = `rgb(255, ${isNotNum ? "125, 115" : "255, 255"})`
  element.style.border = isNotNum ? "2px solid red" : "default"
}

Oder, noch besser, fügen Sie eine bedingte CSS-Klasse hinzu:

const checkNr = id => {
  const element = document.getElementById(id)
  const isNotNum = isNaN(parseFloat(element.value))
  element.classList.add(isNotNum ? "not-number" : "is-number");
}

.not-number {
  background-color: rgb(255, 125, 115);
  border: 2px solid red;
}
.is-number {
  background-color: rgb(255, 255, 255);
  border: default;
}

jQuery-Option:

$(this).css('border', 'default');

Sie können auch Arrays als Parameter von übergeben .css() Funktion. Dadurch werden Ihre vorhandenen CSS-Eigenschaften nicht überschrieben.

In deinem Fall wäre das etwa so:

document.getElementById(id).css({
   border: '2px solid red;',
   background-color: 'rgb(255, 125, 115)'
});

Beachten Sie, dass Sie jQuery zu Ihrem Projekt hinzufügen müssten, damit dies funktioniert.

Link zur css()-Funktion von jQuery