자바 스크립트로 CSS 스타일을 제거하는 중

Question

나는 창/브라우저 설정에 따라 기본 테두리가있는 일반 HTML 입력 필드가 있습니다.

양식 유효성 검사 중에 요소의 테두리를 빨간색으로 설정했습니다.

elem.style.border = "1px solid #ff0000"; 

사용자가 입력가 해결되면 예

, 나는 입력 필드가 다시 기본 경계를 포함하도록, 빨간색 테두리를 제거하려는.

Answer 1

수업을 토글하는 것이 더 쉽습니다.

 var addClass = function(c, e) { 
     e.className += ' ' + c; 
     }, 

     removeClass = function(c, e) { 
     e.className = e.className.replace(c, ''); 
     }; 

사용법 :

이

addClass('redBorder', el); 
removeClass('redBorder', el); 

CSS : 여기

.redBorder { border:1px solid red; } 

Answer 2

테두리를 설정하는 CSS 클래스를 추가하는 것이 가장 좋은 방법입니다. 클래스를 추가 할 수 있습니다.

.redBorder{ 
    border: "1px solid #FF0000"; 
} 

그리고이 클래스를 설정해야 할 때마다이를 요소의 클래스로 추가 할 수 있습니다. 이렇게하면 리셋 과정이 쉬워집니다. 이 작업을하기 때문에

elem.style.removeProperty("border"); 

그러나, 그것은, Kangkan이 제안, 추가하고 CSS 클래스를 제거하는 것이 더 의미가 있습니다 :

비 IE 브라우저에서

Answer 3

, 당신은 style 개체의 removeProperty() 방법을 사용할 수 있습니다 모든 주요 브라우저에서.

Answer 4

클래스를 교체 CSS를

를 추가 요구 또는 가능성에 따라 두 가지 방법이 전반적으로 더 나은 솔루션입니다 여러 클래스의 경우 - 다른 답변보기 (예 :

)

<style> 
.red { border:1px solid red } 
.black { border:1px solid black } 
</style> 

<input class="black" type="text" onKeyUp="this.className = isNaN(this.value)?'red':'black'"> 
<input class="black" type="text" onKeyUp="this.style.border = isNaN(this.value)?'1px solid red':'1px solid black'">