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方法的特定属性。所以，我想添加属性而不是替换它们。

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

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

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)

Answer 4

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

您还可以将数组作为.css（）函数的参数传递。这不会覆盖现有的css属性。

在你的情况下，这将是：

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

link to javascript css() function

将css属性添加到元素

4 个答案: