이미 클래스가있는 요소가 있습니다.
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
이제 클래스를 추가하는 JavaScript 함수를 만들고 싶습니다 div
(바꾸지 말고 추가하십시오).
어떻게해야합니까?
답변
최신 브라우저 만 타겟팅하는 경우 :
element.classList.add 를 사용 하여 클래스를 추가 하십시오 .
element.classList.add("my-class");
그리고 element.classList.remove 는 클래스를 제거합니다 :
element.classList.remove("my-class");
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 브라우저 를 확인하십시오 .