使用 JavaScript 向元素添加 CSS 属性

Question

我想将 CSS 属性添加到我的元素，但我当前的解决方案丢失了所有以前对该元素有影响的属性。

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

在使用此方法之前，元素已经具有属性：

 float: left;
width: 50px;

之后，元素会丢失这些属性，只留下来自 JavaScript 方法的特定属性。所以，我想添加属性而不替换它们。

原文由 Daniel Gustafsson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

像那样设置样式属性会覆盖该属性并删除以前设置的样式。

你真正应该做的是直接设置样式，而不是通过更改样式属性：

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

原文由 adeneo 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 Fatih Ertuğral 发布，翻译遵循 CC BY-SA 4.0 许可协议