Dodaj atrybut css do elementu

Question

Chcę dodać atrybuty css do mojego elementu. Ale kiedy robię to z kodem tutaj, tracę wszystkie atrybuty, które mają wpływ na element.

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

} 

Przed użyć tej metody to mieć atrybuty:

float: left; 
width: 50px; 

a potem to tylko dostał konkretne atrybuty z metodą Javascript. Tak więc chcę dodać atrybuty, które ich nie zastępują.

Answer 1

Ustawienie takiego atrybutu stylu powoduje nadpisanie atrybutu i usunięcie wcześniej ustawionych stylów.

Co naprawdę należy zrobić, to ustawić style bezpośrednio zamiast zmieniając właściwość stylu:

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

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

Można także przekazać tablicy parametru tablica jako parametr funkcji .css(). To nie zastąpi twoich istniejących właściwości css.

W twoim przypadku to byłoby coś jak:

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

link to javascript css() function