답변:
element.classList.add 를 사용 하여 클래스를 추가 하십시오 .
element.classList.add("my-class");그리고 element.classList.remove 는 클래스를 제거합니다 :
element.classList.remove("my-class");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기존 상태를 확인하고 공간 요구 사항 등을 확인하기 위해 더 똑똑한 방법으로 랩핑 할 수 있습니다.
split공백에서 구식 인 클래스 이름을 제거하려면 결과 배열에서 원하지 않는 클래스 이름을 제거한 다음 join배열을 다시 ... 또는 사용하십시오 element.classList.remove.
크로스 호환
다음 예제 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")YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")a.classList ? ...)은 일반 버전 ( )과 속도 차이가 if (a.classList) { ....있습니까?
classList.remove()있습니다. 왜 사용하지 않았습니까? 그것은 훨씬 더 빨리 jQuery를 이상이다 jsperf.com/remove-class-vanilla-vs-jquery
classList은 클래스를 제거하는 것을 제외하고는 모든 것에 사용 했습니다.
순수한 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;
}if( cn.indexOf( classname ) != -1 ) { return; } “btn-info”클래스가 이미있는 상태에서“btn”클래스를 추가하면 실패합니다.
element.className.split(" ");@AlexandreDieulot이 여기에보고 된 문제를 방지하기 위해 사용해야 합니다.
이 하나의 클래스를 추가하는 것 이상을 수행한다고 가정하면 (예를 들어, 비동기 요청 등이 있음) Prototype 또는 jQuery 와 같은 라이브러리를 권장합니다 .
이것은 당신이해야 할 모든 것을 (이것을 포함하여) 매우 간단하게 만듭니다.
이제 페이지에 jQuery가 있다고 가정하면 다음과 같은 코드를 사용하여 요소에 클래스 이름을 추가 할 수 있습니다 (이 경우로드시).
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );다른 것들에 대해서는 jQuery API 브라우저 를 확인하십시오 .
classList.add OR classList.remove 메소드를 사용하여 요소에서 클래스를 추가 / 제거 할 수 있습니다.
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")위의 코드는 nameElem에 클래스 "anyclass"를 추가하고 교체하지 않습니다. 마찬가지로 classList.remove () 메서드를 사용하여 클래스를 제거 할 수 있습니다.
nameElem.classList.remove("anyclss")기존 값을 제거하거나 영향을주지 않고 요소에 클래스를 추가하려면 다음과 같이 공백과 새 클래스 이름을 추가하십시오.
document.getElementById("MyElement").className += " MyClass";기존의 모든 클래스를 하나 이상의 새 클래스로 바꾸려면 className 속성을 설정하십시오.
document.getElementById("MyElement").className = "MyClass";공백으로 구분 된 목록을 사용하여 여러 클래스를 적용 할 수 있습니다.
IE9가 공식적으로 종료되었다는 것을 알고 element.classList있으며 많은 사람들이 위에서 말한 것처럼 그것을 달성 할 수 는 있지만 위 classList의 많은 대답을 도움 없이 배우는 방법을 배우려고 했습니다.
아래 코드는 위의 많은 답변을 확장하고 중복 클래스 추가를 피함으로써 개선합니다.
function addClass(element,className){
var classArray = className.split(' ');
classArray.forEach(function (className) {
if(!hasClass(element,className)){
element.className += " "+className;
}
});
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');나도 가장 빠른 방법은 es5에서와 같이 Element.prototype.classList를 사용하는 것이라고 생각 document.querySelector(".my.super-class").classList.add('new-class')
하지만 ie8에서는 Element.prototype.classList와 같은 것이 없으므로 어쨌든이 스 니펫으로 polyfill 할 수 있습니다 (무료로 편집하고 개선하십시오) ) :
if(Element.prototype.classList === void 0){
function DOMTokenList(classes, self){
typeof classes == "string" && (classes = classes.split(' '))
while(this.length){
Array.prototype.pop.apply(this);
}
Array.prototype.push.apply(this, classes);
this.__self__ = this.__self__ || self
}
DOMTokenList.prototype.item = function (index){
return this[index];
}
DOMTokenList.prototype.contains = function (myClass){
for(var i = this.length - 1; i >= 0 ; i--){
if(this[i] === myClass){
return true;
}
}
return false
}
DOMTokenList.prototype.add = function (newClass){
if(this.contains(newClass)){
return;
}
this.__self__.className += (this.__self__.className?" ":"")+newClass;
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.remove = function (oldClass){
if(!this.contains(newClass)){
return;
}
this[this.indexOf(oldClass)] = undefined
this.__self__.className = this.join(' ').replace(/ +/, ' ')
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.toggle = function (aClass){
this[this.contains(aClass)? 'remove' : 'add'](aClass)
return this.contains(aClass);
}
DOMTokenList.prototype.replace = function (oldClass, newClass){
this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
}
Object.defineProperty(Element.prototype, 'classList', {
get: function() {
return new DOMTokenList( this.className, this );
},
enumerable: false
})
}다른 사람들의 말을 자세히 설명하기 위해 여러 CSS 클래스가 공백으로 구분 된 단일 문자열로 결합됩니다. 따라서 하드 코딩하려는 경우 간단히 다음과 같습니다.
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>거기에서 새 클래스를 추가하는 데 필요한 자바 스크립트를 쉽게 파생시킬 수 있습니다. 요소의 className 속성에 공백 다음에 새 클래스를 추가하십시오. 이것을 알면 나중에 필요할 때 클래스를 제거하는 함수를 작성할 수도 있습니다.
간단한 방법으로 요소 클래스를 추가, 제거 또는 확인하려면 다음을 수행하십시오.
var uclass = {
exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/ /g,' ');elem.className = c;}
};
var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');jQuery와 비슷한 현대적인 접근 방식을 사용할 수 있습니다
JS에서 DOM에서 찾을 수있는 하나의 요소 만 변경해야하는 경우 다음을 사용할 수 있습니다.
document.querySelector('.someclass').className += " red";.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" only to first element in DOM</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>수업 명 앞에 공백 을 하나 두십시오 .
새 클래스를 추가하려는 클래스가 여러 개인 경우 다음과 같이 사용할 수 있습니다
document.querySelectorAll('.someclass').forEach(function(element) {
element.className += " red";
});.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>브라우저의 DOM에서 실행할 수있는 순수한 JavaScript를 사용하는 것이 좋습니다.
그것을 사용하는 기능적인 방법은 다음과 같습니다. ES6을 사용했지만 JavaScript StyleGuide에 적합한 ES5 및 함수 표현식 또는 함수 정의를 자유롭게 사용하십시오.
'use strict'
const oldAdd = (element, className) => {
let classes = element.className.split(' ')
if (classes.indexOf(className) < 0) {
classes.push(className)
}
element.className = classes.join(' ')
}
const oldRemove = (element, className) => {
let classes = element.className.split(' ')
const idx = classes.indexOf(className)
if (idx > -1) {
classes.splice(idx, 1)
}
element.className = classes.join(' ')
}
const addClass = (element, className) => {
if (element.classList) {
element.classList.add(className)
} else {
oldAdd(element, className)
}
}
const removeClass = (element, className) => {
if (element.classList) {
element.classList.remove(className)
} else {
oldRemove(element, className)
}
}순수한 JS가있는 샘플. 첫 번째 예에서 우리는 요소의 id를 얻고 2 개의 클래스를 추가합니다.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})두 번째 예에서는 element의 클래스 이름을 얻고 1을 더 추가합니다.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})사용하는 사람들을 위해 Lodash을 하고 업데이트를 원하는 className문자열 :
// get element reference
var elem = document.getElementById('myElement');
// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()
// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()먼저 div에 id를 지정하십시오. 그런 다음 appendClass 함수를 호출하십시오.
<script language="javascript">
function appendClass(elementId, classToAppend){
var oldClass = document.getElementById(elementId).getAttribute("class");
if (oldClass.indexOf(classToAdd) == -1)
{
document.getElementById(elementId).setAttribute("class", classToAppend);
}
}
</script>API querySelector를 사용하여 요소를 선택한 다음 요소와 새 클래스 이름을 매개 변수로 사용하여 함수를 작성할 수 있습니다. 최신 브라우저에는 클래스 목록 사용, IE8에는 그렇지 않습니다. 그런 다음 이벤트 후에 함수를 호출 할 수 있습니다.
//select the dom element
var addClassVar = document.querySelector('.someclass');
//define the addclass function
var addClass = function(el,className){
if (el.classList){
el.classList.add(className);
}
else {
el.className += ' ' + className;
}
};
//call the function
addClass(addClassVar, 'newClass');document.getElementById('some_id').className+=' someclassname'또는:
document.getElementById('come_id').classList.add('someclassname')첫 번째 접근 방식은 두 번째 접근 방식이 작동하지 않을 때 클래스를 추가하는 데 도움이되었습니다.
앞에 공간을 유지하는 것을 잊지 마십시오' someclassname'첫 번째 접근 방식 .
제거를 위해 다음을 사용할 수 있습니다.
document.getElementById('some_id').classList.remove('someclassname')이 JS 코드는 나를 위해 작동합니다
클래스 이름 교체를 제공합니다
var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta[i] = 'hidden';
break;// quit for loop
}
else if (Ta[i] == 'hidden'){
Ta[i] = 'visible';
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class name그냥 사용하려면
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class name사용을 제거하려면
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta.splice( i, 1 );
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class name이것이 sombody에 도움이되기를 바랍니다
element.classList.add("my-class")대신 사용하십시오.