Добавить атрибут css в элемент

Я хочу добавить атрибуты 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-метода. Поэтому я хочу добавить атрибуты, не заменяя их.

Ответ 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)';
    }
}

Ответ 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);
}

Ответ 3

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

Вы также можете передать массив как параметр функции .css(). Это не будет отменять существующие свойства css.

В вашем случае это будет что-то вроде:

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

ссылка на функцию javascript css()