Aggiungi attributo css all'elemento

Question

Desidero aggiungere attributi css al mio elemento. Ma quando lo faccio con il codice qui in basso, perdo tutti gli attributi che hanno avuto un impatto sull'elemento.

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

} 

prima di usare questo metodo di esso ha gli attributi:

float: left; 
width: 50px; 

e poi ha ottenuto solo gli attributi specifici del metodo di javascript. Quindi, voglio aggiungere attributi non sostituirli.

Answer 1

Impostare l'attributo di stile in questo modo, sovrascrive l'attributo e rimuove gli stili precedentemente impostati.

Quello che si dovrebbe fare è impostare gli stili direttamente invece modificando la proprietà di stile:

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

È possibile anche passare come parametro di serie della funzione css(). Questo non sovrascriverà le tue proprietà css esistenti.

Nel tuo caso questo sarebbe qualcosa di simile:

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

link to javascript css() function