Resetowanie koloru obramowania kontrolki wejściowej (HTML/JavaScript)

Question

Czy ktoś wie, jak zresetować kolor obramowania kontrolki wejściowej po zmodyfikowaniu za pomocą javascript? Przydatne do sprawdzania poprawności, podświetlając pola z niepoprawnymi lub nieprawidłowymi danymi itp.

E.g. zmiana granicy:

document.getElementById('myinput').style.border = '1px solid red'; 

jak zresetować? następny wiersz po prostu usuwa granicę całkowicie ...

document.getElementById('myinput').style.border = ''; 

gdybym zresetować kolor obramowania z powrotem do danego koloru (np czarny lub szary itp), może to wyglądać dziwnie w niektórych przeglądarkach/systemów operacyjnych tego rodzaju "temat" sterowania ...

dzięki hałd!

Answer 1

Nie rób tego z ustawianiem atrybutów stylu. Zrób to za pomocą klas CSS. Polecam również używanie biblioteki JavaScript do obsługi tego. Po prostu sprawia, że ​​kod jest czystszy.

Usuwanie atrybutów CSS jest problematyczne, ponieważ nie zawsze wiesz, do czego mają zostać przywrócone. Dodawanie i usuwanie klas po prostu ... działa.

Możesz mieć wiele klas na element, więc naprawdę nie ma argumentów przeciwko robieniu tego w ten sposób (imho).

Jestem przyzwyczajony do jQuery, więc mój przykład jest z tym.

Niewłaściwy sposób:

$("#myinput").css("border", "1px solid red"); 

Prawy sposób:

<style type="text/css"> 
.redborder { border: 1px solid red; } 
</style> 

<script type="text/javascript"> 
$("#myinput").addClass("redborder"); 
$("#myinput").removeClass("redborder"); 
$("#myinput").toggleClass("redborder"); 
</script> 

Answer 2

Czy chcesz po prostu granica odejść? Nie sądzę, ponieważ oświadczyłeś, że tak nie jest.

Właściwym sposobem na "reset" jest ustawienie domyślne. Nie jestem pewien, co jest domyślne, ale zgaduję, że coś takiego jak "1px czarny" lub podobne.

Ja często używam tej techniki w różnych aplikacjach. Kiedy nie znam ustawień domyślnych, ustawię własne "domyślne", aby móc je powtórzyć. Jedną z moich ulubionych technik, na stronach internetowych, jest ustawienie koloru tła kontrolki zamiast obramowania. Jest bardzo widoczny i można wybrać bardziej wyciszony kolor i nadal mieć wpływ. W takim przypadku bardzo łatwo jest ustawić tło z powrotem na biały, co jest domyślne.

Answer 3

Działa to dla mnie:

document.getElementById('myinput').style.removeProperty('border');