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

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

Edit: 요소에서 클래스를 제거하려면 다음과 같이 하십시오.

element.classList.remove("otherclass");

빈 공간을 추가하지 않고 직접 엔트리를 중복 처리할 필요가 없습니다(이것은,document.className접근).브라우저의 제한이 있지만 폴리필을 사용하여 해결할 수 있습니다.

원하는 대로 대상 요소 “d”를 찾은 후 다음을 수행합니다.

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

사전 테스트 및 공간 요구 사항 등을 확인하기 위해 보다 현명한 방법으로 포장할 수 있습니다.

클래스 추가

상호 호환

다음 예제에서는 를 추가합니다.classname에게<body>요소.이것은 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");

지정된 요소에 클래스를 추가하려면 어떻게 해야 합니까?