使用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

Answer 1

设置style属性会覆盖原有的属性并删除之前设置的样式。

你真正需要做的是直接更改样式属性来设置样式：

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

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

---

你不能检查 parseFloat 调用是否等于 NaN，因为 NaN 不等于它本身。请使用 isNaN。 - Jacob

Answer 3

最简单的方法是：

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

或者使用 jQuery

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

- Javier Sarsa

Answer 4

直接设置元素的样式属性将覆盖任何先前的值：

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

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

相反，使用element.style.property = value语法逐个设置属性：

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

或者，更好的方法是添加一个条件CSS类：

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

- Jacob

Answer 5

jQuery选项：

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

你还可以将数组作为.css()函数的参数传递。这不会覆盖你现有的 CSS 属性。

在你的情况下，代码可能类似于：

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

请注意，您需要将jQuery添加到项目中才能使其正常工作。

链接至jQuery css()函数

- Bastaspast

---

那不是一个 JavaScript 函数，而是 jQuery 函数。 - Wojciech Maj

这种做法不应受到这么多负面回答的惩罚，这是一个好的方法，也许它不是JavaScript，但如果有人建议编辑答案并添加jQuery规范，它可以帮助很多人。 - Dayán Ruiz

这不是JavaScript，但这个问题已经被浏览了八万九千次——我点赞了，因为这肯定可以帮助其他人。 - sam1370