JavaScript로 요소의 클래스를 어떻게 변경할 수 있습니까?
질문
JavaScript를 사용하여 onClick 또는 다른 이벤트에 대한 응답으로 HTML 요소의 클래스를 어떻게 변경할 수 있습니까?
답변
수업을 변경하는 현대 HTML5 기술
현대 브라우저는 라이브러리가 필요없는 클래스를보다 쉽게 조작 할 수있는 메서드를 제공하는 클래스 목록을 추가했습니다.
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');
불행히도,이 페이지에서 사용할 수있는 IE8 및 IE9에 대한 지원을 추가하는 Shim은 V10 이전에는 Internet Explorer에서 작동하지 않습니다.그러나 점점 더 많은 지원을 받고 있습니다.
간단한 크로스 브라우저 솔루션
요소를 선택하는 표준 JavaScript 방식은 문서입니다. getElementByID ( "ID")를 사용하는 것입니다. 이는 다음 예제가 사용하는 것입니다. 물론 다른 방식으로 요소를 구할 수 있으며 올바른 상황에서는 대신 간단히 사용할 수 있습니다.이것에 대한 자세한 내용은 답변의 범위를 벗어납니다.
요소의 모든 클래스를 변경하려면 다음을 수행하십시오.
모든 기존 클래스를 하나 이상의 새 클래스로 바꾸려면 className 속성을 설정하십시오.
document.getElementById("MyElement").className = "MyClass";
(공백으로 구분 된 목록을 사용하여 여러 클래스를 적용 할 수 있습니다.)
추가 클래스를 요소에 추가하려면 다음을 수행하십시오.
요소에 클래스를 추가하려면 기존 값을 제거 / 영향을 미치지 않고 공백과 새 클래스 이름을 추가하십시오.
document.getElementById("MyElement").className += " MyClass";
요소에서 클래스를 제거하려면 :
다른 잠재적 인 클래스에 영향을주지 않고 단일 클래스를 요소로 제거하려면 간단한 정규식 대체가 필요합니다.
document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace
( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */
이 정규식에 대한 설명은 다음과 같습니다.
(?:^|\s) # Match the start of the string or any single whitespace character
MyClass # The literal text for the classname to remove
(?!\S) # Negative lookahead to verify the above is the whole classname
# Ensures there is no non-space character following
# (i.e. must be the end of the string or space)
G 플래그는 클래스 이름이 여러 번 추가 된 경우에 필요한만큼 반복 할 수있는 대체자에게 반복하도록 지시합니다.
클래스가 이미 요소에 적용되는지 확인하려면 다음을 수행하십시오.
클래스를 제거하기위한 위에서 사용되는 동일한 정규식은 특정 클래스가 존재하는지 여부에 대한 수표로 사용될 수 있습니다.
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
HTML 이벤트 속성 (예 : OnClick = "과 같은) 내에 JavaScript를 직접 작성할 수 있습니다 (예 : OnClick ="+ = 'myClass' ")는 권장되는 동작이 아닙니다.특히 대규모 응용 프로그램에서는 JavaScript 상호 작용 논리에서 HTML 마크 업을 분리하여보다 유지 보수 가능 코드가 달성됩니다.
이를 달성하기위한 첫 번째 단계는 기능을 작성하고 onClick 속성에서 함수를 호출하는 것입니다.
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onclick="changeClass()">My Button</button>
(이 코드를 스크립트 태그에 넣을 필요는 없으며, 이것은 단순히 예를 들어, 별개의 파일에있는 JavaScript를 포함하여 더 적절할 수 있습니다.)
두 번째 단계는 AddEventListener를 사용하여 HTML 및 JavaScript로 onClick 이벤트를 JavaScript로 이동하는 것입니다.
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
window.onload = function(){
document.getElementById("MyElement").addEventListener( 'click', changeClass);
}
</script>
...
<button id="MyElement">My Button</button>
HTML이로드가 끝난 후 해당 함수의 내용이 실행되도록 윈도우 .Olload 파트가 필요합니다.이 옵션이 없으면 JavaScript 코드가 호출 될 때 myElement가 존재하지 않을 수 있습니다.
자바 스크립트 프레임 워크 및 라이브러리
위의 코드는 모두 표준 JavaScript에 있지만 프레임 워크 나 라이브러리를 사용하여 공통 작업을 단순화하고 코드를 작성할 때 생각하지 않을 수있는 고정 버그 및 가장자리 사례의 혜택을 누릴 수있는 일반적인 방법입니다.
어떤 사람들은 ~ 50KB 프레임 워크를 추가하기 위해 ~ 50KB 프레임 워크를 추가하기 만하면 상당한 양의 자바 스크립트 작업이나 비정상적인 브라우저 동작이있을 수있는 모든 것을 수행하는 경우 고려할 가치가 있습니다.
(매우 대략적으로 라이브러리는 특정 작업을 위해 설계된 도구 집합이며 프레임 워크는 일반적으로 여러 라이브러리를 포함하고 완전한 의무 세트를 수행합니다.)
위의 예제는 jQuery, 아마도 가장 일반적으로 사용되는 JavaScript 라이브러리를 사용하여 복제 해 왔지만 (그러나 너무 조사 할 가치가있는 다른 것들도있다).
(여기서 $ jQuery 객체가 있습니다.)
jQuery와 수업 변경 :
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
또한 jQuery는 적용되지 않거나 해당 클래스를 제거하는 경우 클래스를 추가하는 바로 가기를 제공합니다.
$('#MyElement').toggleClass('MyClass');
$('#MyElement').click(changeClass);
또는 ID가 필요하지 않고 :
$(':button:contains(My Button)').click(changeClass);
답변
당신은 또한 할 수 있습니다 :
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');
클래스를 전환하려면 (Exeries If Exerials It) 제거) :
document.getElementById('id').classList.toggle('class');
답변
jQuery를 사용하지 않은 이전 프로젝트 중 하나에서 요소가 클래스가 있는지 추가, 제거 및 확인하기위한 다음과 같은 기능을 작성했습니다.
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
if (!hasClass(ele, cls))
ele.className += " " + cls;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
예를 들어, ONCLICK을 버튼에 추가하려면 ONCLICK을 사용하면 다음을 사용할 수 있습니다.
<script type="text/javascript">
function changeClass(btn, cls) {
if(!hasClass(btn, cls)) {
addClass(btn, cls);
}
}
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>
지금까지 jQuery를 사용하는 것이 더 낫습니다.
답변
node.classname을 사용하면 다음과 같이 사용할 수 있습니다.
document.getElementById('foo').className = 'bar';
이것은 PPK에 따라 Internet Explorer 5.5 이상에서 작동해야합니다.
답변
와우, 놀란 거기에 너무 많은 과도한 대답이 있습니다 ...
<div class="firstClass" onclick="this.className='secondClass'">
답변
순수한 JavaScript 코드 사용 :
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
function replaceClass(ele, oldClass, newClass){
if(hasClass(ele, oldClass)){
removeClass(ele, oldClass);
addClass(ele, newClass);
}
return;
}
function toggleClass(ele, cls1, cls2){
if(hasClass(ele, cls1)){
replaceClass(ele, cls1, cls2);
}else if(hasClass(ele, cls2)){
replaceClass(ele, cls2, cls1);
}else{
addClass(ele, cls1);
}
}
최근댓글