etc./StackOverFlow

주어진 요소에 클래스를 추가하는 방법은 무엇입니까?

청렴결백한 만능 재주꾼 2022. 7. 6. 02:43
반응형

질문자 :Blankman


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

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

div 클래스를 추가하는 JavaScript 함수를 만들고 싶습니다(바꾸지 않고 추가).

어떻게 할 수 있습니까?



최신 브라우저만 대상으로 하는 경우:

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 도 참조하십시오.


Ishmael

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

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

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

 element.classList.remove("otherclass");

나는 빈 공간을 추가하지 않고 스스로 항목을 중복 처리하는 것을 선호합니다(이는 document.className 접근 방식을 사용할 때 필요합니다). 일부 브라우저 제한 사항 이 있지만 폴리필을 사용하여 해결할 수 있습니다.


Yuri

원하는 대로 대상 요소 "d"를 찾은 다음:

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

더 똑똑한 방법으로 포장하여 사전 존재를 확인하고 공간 요구 사항 등을 확인할 수 있습니다.


annakata

수업 추가

  • 교차 호환

    다음 예제에서는 <body> 요소에 classname 이것은 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;

참고문헌

  1. jsPerf 테스트 케이스: 클래스 추가
  2. jsPerf 테스트 케이스: 클래스 제거

프로토타입 사용

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

davidcondrey

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

클래스 추가:

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

클래스 제거:

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

Shoaib Chikate

내가 하는 일이 라이브러리 사용을 보증하지 않을 때, 나는 다음 두 가지 기능을 사용합니다:

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

meouw

이 하나의 클래스를 추가하는 것 이상의 작업을 수행한다고 가정하면(예: 비동기 요청이 있는 등 계속 진행 중임) Prototype 또는 jQuery 와 같은 라이브러리를 권장합니다.

이것은 (이를 포함하여) 해야 할 거의 모든 것을 매우 간단하게 만들 것입니다.

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

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

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


rfunduk

classList.add 또는 classList.remove 메소드를 사용하여 요소에서 클래스를 추가/제거할 수 있습니다.

 var nameElem = document.getElementById("name") nameElem.classList.add("anyclss")

위의 코드는 nameElem에 "anyclass" 클래스를 추가(교체하지 않음)합니다. 마찬가지로 classList.remove() 메서드를 사용하여 클래스를 제거할 수 있습니다.

 nameElem.classList.remove("anyclss")

sjv

요소에 추가 클래스를 추가하려면:

기존 값을 제거/영향을 주지 않고 요소에 클래스를 추가하려면 다음과 같이 공백과 새 클래스 이름을 추가합니다.

 document.getElementById("MyElement").className += " MyClass";

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

모든 기존 클래스를 하나 이상의 새 클래스로 바꾸려면 className 속성을 설정하십시오.

 document.getElementById("MyElement").className = "MyClass";

(공백으로 구분된 목록을 사용하여 여러 클래스를 적용할 수 있습니다.)


Mo.

jQuery를 사용하지 않고 이전 브라우저를 지원하려는 경우:

 function addClass(elem, clazz) { if (!elemHasClass(elem, clazz)) { elem.className += " " + clazz; } } function elemHasClass(elem, clazz) { return new RegExp("( |^)" + clazz + "( |$)").test(elem.className); }

Ferran Maylinch

document.querySelector(".my.super-class").classList.add('new-class') 에서와 같이 Element.prototype.classList를 사용하는 것이라고 생각하지만 ie8에는 그러한 어쨌든 Element.prototype.classList와 같이 다음 스니펫으로 폴리필할 수 있습니다(자유롭게 편집하고 개선할 수 있음).

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


asdru

document.getElementById('some_id').className+=' someclassname'

또는:

 document.getElementById('some_id').classList.add('someclassname')

첫 번째 접근 방식은 두 번째 접근 방식이 작동하지 않을 때 클래스를 추가하는 데 도움이 되었습니다.
첫 번째 접근 방식에서 ' someclassname' 앞에 공백을 두는 것을 잊지 마십시오.

제거를 위해 다음을 사용할 수 있습니다.

 document.getElementById('some_id').classList.remove('someclassname')

Athira V Ajit

간단한 방법으로 요소 클래스를 추가, 제거 또는 확인하려면:

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

Marcos Fernandez Ramos

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

Yuvaraj

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>


Vladimir Jovanović

다른 사람들이 말한 것을 자세히 설명하기 위해 여러 CSS 클래스가 공백으로 구분된 단일 문자열로 결합됩니다. 따라서 하드 코딩하려면 다음과 같이 보일 것입니다.

 <div class="someClass otherClass yetAnotherClass"> <img ... id="image1" name="image1" /> </div>

거기에서 새 클래스를 추가하는 데 필요한 자바스크립트를 쉽게 파생시킬 수 있습니다. 요소의 className 속성에 공백 다음에 새 클래스를 추가하기만 하면 됩니다. 이것을 알면 나중에 필요할 때 클래스를 제거하는 함수를 작성할 수도 있습니다.


Misko

브라우저의 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) } }


bvmCoder

순수 JS로 샘플. 첫 번째 예에서 우리는 요소의 ID를 얻고 예를 들어 2개의 클래스를 추가합니다.

 document.addEventListener('DOMContentLoaded', function() { document.getElementsById('tabGroup').className = "anyClass1 anyClass2"; })

두 번째 예에서는 요소의 클래스 이름을 얻고 1을 더 추가합니다.

 document.addEventListener('DOMContentLoaded', function() { document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready"; })

Vasyl Gutnyk

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

S.D.

최단

 image1.parentNode.className+=' box'; 

 image1.parentNode.className+=' box';
 .box { width: 100px; height:100px; background: red; }
 <div class="someclass"> <img ... id="image1" name="image1" /> </div>


Kamil Kiełczewski

API querySelector를 사용하여 요소를 선택한 다음 요소와 새 클래스 이름을 매개변수로 사용하여 함수를 생성할 수 있습니다. 최신 브라우저에서는 classlist를 사용하고 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');

KevinOrfas

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

tehvan

main-wrapper 라는 클래스가 두 개 이상 main-wrapper 에만 영향을 미치고 싶었습니다. :first Selector ( https://api.jquery.com/first-selector/ )를 사용하여 일치하는 첫 번째 DOM 요소를 선택할 수 있습니다. 이것이 나를 위한 해결책이었습니다.

 $(document).ready( function() { $('.main-wrapper:first').addClass('homepage-redesign'); $('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign'); } );

$('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign'); 코드에서 볼 수 있듯이 DOM에 있는 특정 div의 두 번째 자식에 대해서도 동일한 작업을 수행했습니다. $('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign'); .

참고: 보시 jQuery


Jaime Montoya

이 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

이것이 누군가에게 도움이되기를 바랍니다.


Anon

YUI에서 yuidom 을 포함하면 다음을 사용할 수 있습니다.

YAHOO.util.Dom.addClass('div1','className');

HTH


Alagu

출처 : http:www.stackoverflow.com/questions/507138/how-to-add-a-class-to-a-given-element

반응형

'etc. > StackOverFlow' 카테고리의 다른 글

type()과 isinstance()의 차이점은 무엇입니까?  (0) 2022.07.09
PHP에서 어떻게 리디렉션합니까?  (0) 2022.07.06
인쇄 기능의 출력을 어떻게 플러시할 수 있습니까?  (0) 2022.07.06
전체 경로가 주어진 모듈을 가져오는 방법은 무엇입니까?  (0) 2022.07.06
JSON 데이터를 파일에 어떻게 쓰나요?  (0) 2022.07.06

'etc./StackOverFlow'의 다른글

  • 현재글주어진 요소에 클래스를 추가하는 방법은 무엇입니까?

관련글

댓글

티스토리툴바