[javascript] JavaScript로 요소의 클래스를 변경하려면 어떻게해야합니까?

클래스 변경을위한 최신 HTML5 기술

최신 브라우저에는 라이브러리가 없어도 클래스를보다 쉽게 ​​조작 할 수있는 메소드를 제공하는 classList 가 추가되었습니다 .

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

이 있지만 불행하게도, 이들은, V10 이전에 Internet Explorer에서 작동하지 않습니다 심 에서 사용할 수 IE8 및 IE9에 대한 지원을 추가하기 위해, 이 페이지 . 그러나 점점 더 많은 지원을 받고 있습니다 .

간단한 크로스 브라우저 솔루션

요소를 선택하는 표준 JavaScript 방법 document.getElementById("Id")은 다음 예제에서 사용하는 것입니다. 물론 다른 방법으로 요소를 얻을 수 있으며 올바른 상황에서는 this대신 대신 사용할 수 있습니다. 그러나 이에 대한 자세한 내용은 범위를 벗어납니다. 대답.

요소의 모든 클래스를 변경하려면

기존의 모든 클래스를 하나 이상의 새 클래스로 바꾸려면 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 end of string or a space)

g플래그는 필요, 경우에 클래스 이름이 추가 된 여러 번으로 반복으로 대체 알려줍니다.

클래스가 요소에 이미 적용되어 있는지 확인하려면

클래스를 제거하기 위해 위에서 사용한 것과 같은 정규 표현식을 사용하여 특정 클래스가 존재하는지 여부를 확인할 수도 있습니다.

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

onclick 이벤트에 다음 조치를 지정하십시오.

HTML 이벤트 속성 (예 : 등 onclick="this.className+=' MyClass'") 내에 JavaScript를 직접 작성할 수는 있지만 이는 권장되지 않습니다. 특히 더 큰 응용 프로그램에서는 HTML 마크 업을 JavaScript 상호 작용 논리와 분리하여 유지 관리하기 쉬운 코드를 얻을 수 있습니다.

이를 달성하기위한 첫 번째 단계는 함수를 작성하고 onclick 속성에서 함수를 호출하는 것입니다. 예를 들면 다음과 같습니다.

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

_{(이 코드를 스크립트 태그에 포함 할 필요는 없습니다. 간단한 예제 일 뿐이므로 별도의 파일에 JavaScript를 포함시키는 것이 더 적절할 수 있습니다.)}

두 번째 단계는 onclick 이벤트를 HTML 및 JavaScript로 이동하는 것입니다 (예 : addEventListener 사용).

<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>

(window.onload 부분은 HTML로드가 완료된 후 해당 함수의 내용이 실행되도록하는 데 필요 합니다. 그렇지 않으면 JavaScript 코드가 호출 될 때 MyElement가 존재하지 않아 행이 실패합니다.)

자바 스크립트 프레임 워크 및 라이브러리

위의 코드는 모두 표준 JavaScript로되어 있지만 프레임 워크 또는 라이브러리를 사용하여 일반적인 작업을 단순화하고 코드를 작성할 때 생각할 수없는 고정 버그 및 엣지 사례를 활용하는 것이 일반적입니다.

일부 사람들은 단순히 클래스를 변경하기 위해 ~ 50KB 프레임 워크를 추가하는 것이 과도하다고 생각하지만, 상당한 양의 JavaScript 작업을 수행하거나 비정상적인 브라우저 간 동작이있는 경우에는 고려할 가치가 있습니다.

(거의 대략적으로, 라이브러리는 특정 작업을 위해 설계된 도구 세트이며, 프레임 워크는 일반적으로 여러 라이브러리를 포함하고 완전한 의무 세트를 수행합니다.)

위의 예제는 아마도 가장 일반적으로 사용되는 JavaScript 라이브러리 인 jQuery를 사용하여 아래에서 재현되었습니다 (조사 할 가치가있는 다른 것들도 있음).

( $여기에 jQuery 객체가 있습니다.)

jQuery로 클래스 변경 :

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

또한 jQuery는 클래스가 적용되지 않는 경우 클래스를 추가하거나 제거하는 클래스를 제거하는 바로 가기를 제공합니다.

$('#MyElement').toggleClass('MyClass');

jQuery를 사용하여 클릭 이벤트에 함수 할당 :

$('#MyElement').click(changeClass);

또는 ID가 필요하지 않은 경우 :

$(':button:contains(My Button)').click(changeClass);

답변

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

document.getElementById('id').classList.toggle('class');

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

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

document.getElementById('foo').className = 'bar';

<div class="firstClass" onclick="this.className='secondClass'">

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

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}