이미 클래스가있는 요소가 있습니다.

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

이제 클래스를 추가하는 JavaScript 함수를 만들고 싶습니다 div(바꾸지 말고 추가하십시오).

어떻게해야합니까?

답변

Internet Explorer 9 이하를 지원해야하는 경우 :

className요소 의 속성에 공백과 새 클래스 이름을 추가하십시오 . 먼저 id요소에를 두면 쉽게 참조를 얻을 수 있습니다.

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

그때

var d = document.getElementById("div1");
d.className += " otherclass";

앞에 공백을 기록해 두십시오 otherclass. 그렇지 않으면 클래스 목록에서 앞에 오는 기존 클래스를 손상시키는 공간을 포함시키는 것이 중요합니다.

MDN의 element.className 도 참조하십시오 .

답변

프레임 워크없이 가장 쉬운 방법은 element.classList.add 메소드 를 사용 하는 것입니다.

var element = document.getElementById("div1");
element.classList.add("otherclass");

편집 :
그리고 요소에서 클래스를 제거하려면-

element.classList.remove("otherclass");

빈 공간을 추가하고 직접 항목 처리를 복제하지 않아도됩니다 ( document.className접근 방식을 사용할 때 필요함 ). 가 일부 브라우저의 제한이 있지만 사용하여 해결할 수 있습니다 polyfills을 .

답변

원하는 대상 요소 “d”를 찾은 후 다음을 수행하십시오.

d.className += ' additionalClass'; //note the space

기존 상태를 확인하고 공간 요구 사항 등을 확인하기 위해 더 똑똑한 방법으로 랩핑 할 수 있습니다.

답변

수업 추가

크로스 호환

다음 예제 classname에서는 <body>요소 에 a 를 추가합니다 . 이것은 IE-8과 호환됩니다.

var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';

다음과 같은 약어입니다.

var a = document.body;
if (a.classList) {
    a.classList.add('wait');
} else {
    a.className += ' wait';
}

공연

교차 호환성에 대한 성능에 더 관심이 있다면 다음과 같이 4 % 더 빠르게 단축 할 수 있습니다.
```
var z = document.body;
document.body.classList.add('wait');
```

편의

또는 jQuery를 사용할 수 있지만 결과적으로 성능이 크게 느려집니다. jsPerf에 따르면 94 % 느림
```
$('body').addClass('wait');
```

수업 제거

공연

성능에 관심이 있다면 클래스를 제거하는 가장 좋은 방법은 jQuery를 선택적으로 사용하는 것입니다.
```
var a = document.body, c = ' classname';
$(a).removeClass(c);
```

jQuery가 없으면 32 % 느려집니다.

var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;

참고 문헌

프로토 타입 사용

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

YUI 사용

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")

답변

순수한 JavaScript를 사용하여 클래스를 요소에 추가하는 또 다른 접근법

수업 추가 :

document.getElementById("div1").classList.add("classToBeAdded");

수업 제거 :

document.getElementById("div1").classList.remove("classToBeRemoved");

답변

내가하고있는 작업이 라이브러리를 사용하여 보증하지 않으면 다음 두 가지 기능을 사용합니다.

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}

답변

이 하나의 클래스를 추가하는 것 이상을 수행한다고 가정하면 (예를 들어, 비동기 요청 등이 있음) Prototype 또는 jQuery 와 같은 라이브러리를 권장합니다 .

이것은 당신이해야 할 모든 것을 (이것을 포함하여) 매우 간단하게 만듭니다.

이제 페이지에 jQuery가 있다고 가정하면 다음과 같은 코드를 사용하여 요소에 클래스 이름을 추가 할 수 있습니다 (이 경우로드시).

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

다른 것들에 대해서는 jQuery API 브라우저 를 확인하십시오 .

[javascript] 주어진 요소에 클래스를 어떻게 추가합니까?

답변

최신 브라우저 만 타겟팅하는 경우 :