JavaScript_javascript 팁에서 클래스 및 ID를 변경하는 방법

class

가 아니라 className입니다. JavaScript는 className을 사용하여 클래스 속성에 액세스합니다. class는 예약된 키워드이고, 향후 JavaScript는 Java와 같은 클래스를 지원하기 시작할 수 있기 때문입니다.

스타일 속성을 논의하면서 마치 폭풍우가 몰아치는 바다를 헤쳐나가는 듯한 까다로운 디테일과 브라우저의 차이에 부딪혔습니다. 클래스와 이드의 변화는 브라우저들이 조화롭게 살아가는 사막의 고요한 오아시스와 같다. 다음 예를 고려해보세요.

p {

color: #000000; /* black */

}

p.emphasis {

color: #cc0000; /* red */

}

Test

처음에는 단락에 클래스가 정의되어 있지 않으므로 글꼴 색상이 검정색이에요. 그러나 JavaScript 한 줄이면 스타일을 변경할 수 있습니다.

document.getElementById('test').className = 'emphasis';

즉시 텍스트가 빨간색으로 변합니다. 다시 변경하려면 다음을 수행하세요.

document.getElementById('test').className = ''

스타일을 제거하고 단락이 다음으로 돌아갑니다. 기본 p{} 규칙.

실제적인 예를 보려면 "제한된 길이의 텍스트 입력 영역"을 살펴보세요. 카운터의 구조와 렌더링 스타일은 다음과 같습니다(구조는 JavaScript에 의해 동적으로 생성되지만 이 예에는 영향을 주지 않습니다).

12/1250

div.counter {

글꼴 크기: 80%;

왼쪽 여백: 10px;

}

범위. toumuch {

font-weight:

color: #cc0000;

}

스크립트에서 사용자가 입력한 텍스트가 최대 길이에 도달하면 toumuch에 대한 카운터로 클래스를 수정합니다.

[길이 제한 텍스트 입력 영역, 20-23행]

if (currentLength > maxLength )

this.관련Element.className = 'toomuch';

else

this.관련Element.className = ''

카운터는 굵은 글씨와 빨간색으로 변경됩니다.

id 변경은 거의 동일한 방식으로 작동합니다.

p {

color: #000000; /* black */

}

p#emphasis {

color: #cc0000; /* 빨간색 */

}

테스트

문서 .getElementsByTagName('p')[0].id = 'emphasis';

이 단락의 텍스트가 다시 빨간색으로 변합니다. 다만, 아이디를 너무 많이 변경하지 않는 것이 좋습니다. CSS Hooks로 사용되는 것 외에도 JavaScript Hooks로도 자주 사용되며 이를 변경하면 불특정 부작용이 발생할 수 있습니다.

클래스 추가

일반적으로 요소의 클래스에 새 값을 설정하지 않고 클래스만 추가합니다. 요소에 이미 있는 스타일을 제거하고 싶지 않기 때문입니다. CSS는 복합 스타일을 허용하므로 기존 클래스에서 CSS 지시어를 제거하지 않고도 새 클래스에 포함된 스타일이 요소에 추가됩니다.

"Form Validation"의 writeError() 및 RemoveError() 함수가 좋은 예입니다. 일반적으로 그래픽 디자이너는 입력 필드에 대해 두 개 또는 세 개의 너비를 사용하는 경우가 많기 때문에 양식 필드에 여러 클래스를 적용합니다. 양식 필드에 오류가 있을 때 특별한 경고 스타일을 추가하고 싶지만 요소에 이미 있는 스타일을 엉망으로 만들고 싶지는 않습니다. 따라서 단순히 이전 클래스 값을 덮어쓸 수는 없습니다. 그러면 지정한 너비가 손실됩니다.

이 상황을 보세요:



input.smaller {

width: 75px

}

input.errorMessage {

border-color: #cc0000;

}

처음에는 입력 상자의 너비가 75px입니다. 스크립트가 클래스를 'errorMessage'로 설정하고 이전 값을 삭제하면 양식 필드에 빨간색 테두리가 표시되지만 너비도 손실되어 사용자에게 매우 혼란스러울 수 있습니다.

따라서 errorMessage 클래스를 추가했습니다.

[양식 유효성 검사, 105~106행]

function writeError(obj,message) {

obj .className = ' errorMessage';

이 코드는 기존 className을 가져오고 그 뒤에 새 클래스를 추가하며 그 앞에 공백을 추가합니다. 이 공간은 객체가 이미 가지고 있을 수 있는 클래스 값과 새 클래스를 구분합니다. 이제 입력 상자에는 너비가 75px일 뿐만 아니라 예상한 대로 빨간색 테두리가 있습니다. 이제 양식 필드에 두 개의 클래스가 적용되었으며 HTML은 다음과 같습니다.



공백이 있는 Mozilla의 클래스 이름

removeError( )가 나타날 수 있습니다. errorMessage 클래스의 값을 제거할 때 선행 공백이 없습니다. 그 이유는 브라우저 버그 때문입니다. 원래 값이 없었던 클래스에 errorMessage를 추가하면 Mozilla는 선행 공백을 제거합니다. 그런 다음 교체(/errorMessage/,'')를 실행하면 선행 공백이 더 이상 존재하지 않기 때문에 문자열 errorMessage를 찾을 수 없기 때문에 Mozilla는 클래스를 제거할 수 없습니다.

클래스 제거

사용자가 오류를 수정하면 errorMessage 클래스의 값은 제거되어야 하지만 더 작은 클래스와 같은 원래 클래스는 영향을 받아서는 안 됩니다. RemoveError() 함수는 다음 함수를 제공합니다:

[양식 유효성 검사, 119-120행]

function RemoveError() {

this.className = this.className. (/errorMessage/,'');

먼저 요소의 클래스를 가져온 다음 'errorMessage' 문자열을 ''(널 문자)로 바꿉니다. errorMessage는 클래스 값에서 가져오지만 다른 값에는 영향을 주지 않습니다. 양식 필드의 빨간색 테두리 색상은 사라지지만 너비는 여전히 75px로 유지됩니다.