복붙노트

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

JQUERY

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

해결법

  1. 1.클래스를 추가 할 element.classList.add를 사용하여

    클래스를 추가 할 element.classList.add를 사용하여

    element.classList.add("my-class");

    그리고 element.classList.remove 클래스를 제거합니다 :

    element.classList.remove("my-class");

    공간 플러스 요소의 클래스 속성에 새 클래스의 이름을 추가합니다. 쉽게 참조를 얻을 수 있도록 첫째, 요소에 ID를 넣어.

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

    그때

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

    otherclass 전에 공간을합니다. 그것은 그렇지 않으면 클래스 목록에서 앞에 오는 클래스를 기존의 타협의 공간을 포함하는 것이 중요합니다.

    MDN에도는 element.ClassName를 참조하십시오.

  2. 2.어떤 프레임 워크없이이 작업을 수행하는 가장 쉬운 방법은 element.classList.add 방법을 사용하는 것입니다.

    어떤 프레임 워크없이이 작업을 수행하는 가장 쉬운 방법은 element.classList.add 방법을 사용하는 것입니다.

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

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

    element.classList.remove("otherclass");

    나는 빈 공간합니다 (document.className 접근 방식을 사용하는 경우 필요) 중복 항목 자신을 처리를 추가 할 필요가 없습니다 선호. 가 일부 브라우저의 제한이 있습니다,하지만 당신은 polyfills를 사용하여 해결할 수 있습니다.

  3. 3.당신이 다음 바라고 그러나 대상 요소 "D"를 찾습니다

    당신이 다음 바라고 그러나 대상 요소 "D"를 찾습니다

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

    당신은 영리의 방법으로 사전에 존재하는지 확인하기 위해 포장 및 공간 요구 사항 등을 확인할 수 있습니다 ..

  4. 4.

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

  5. 5.또 다른 방법은 순수 자바 스크립트를 사용하여 요소에 클래스를 추가합니다

    또 다른 방법은 순수 자바 스크립트를 사용하여 요소에 클래스를 추가합니다

    클래스를 추가하는 경우 :

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

    클래스를 제거하는 경우 :

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

  6. 6.내가 뭘 작업이 라이브러리를 사용하여 보증하지 않는 경우, 나는이 두 가지 기능을 사용할 수 :

    내가 뭘 작업이 라이브러리를 사용하여 보증하지 않는 경우, 나는이 두 가지 기능을 사용할 수 :

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

  7. 7.당신이 더 많은 단지 (예를 들어, 비동기 요청을했고, 그래서뿐만 아니라에가는 것)이 하나 개의 클래스를 추가하는 것보다하고있는 가정, 난 프로토 타입이나 jQuery를 같은 라이브러리를 권하고 싶습니다.

    당신이 더 많은 단지 (예를 들어, 비동기 요청을했고, 그래서뿐만 아니라에가는 것)이 하나 개의 클래스를 추가하는 것보다하고있는 가정, 난 프로토 타입이나 jQuery를 같은 라이브러리를 권하고 싶습니다.

    이 모든 내용은 매우 간단 (이 포함) 수행해야 할 것입니다.

    그래서하자 당신이 (이 경우, 부하에) 요소에 클래스 이름을 추가하려면이 같은 코드를 사용할 수 있습니다, 당신은 지금 당신의 페이지에 jQuery를 가지고 말 :

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

    다른 것들에 대한의 jQuery API 브라우저를 확인하세요.

  8. 8.당신은 추가 / a 요소에서 클래스를 제거 classList.add 또는 classList.remove 방법을 사용할 수 있습니다.

    당신은 추가 / a 요소에서 클래스를 제거 classList.add 또는 classList.remove 방법을 사용할 수 있습니다.

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

    위의 코드는 nameElem에 클래스 "anyclass"를 추가 (및 대체 NOT)됩니다. 마찬가지로 당신은 클래스를 제거 classList.remove () 메소드를 사용할 수 있습니다.

    nameElem.classList.remove("anyclss")

  9. 9.기존 값에 영향을주지 / 제거하지 않고, 요소에 공백과 새로운 클래스 명,과 같이 APPEND를 클래스를 추가하려면 :

    기존 값에 영향을주지 / 제거하지 않고, 요소에 공백과 새로운 클래스 명,과 같이 APPEND를 클래스를 추가하려면 :

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

    하나 개 이상의 새로운 클래스와 기존의 모든 클래스를 교체하려면 className 속성을 설정합니다 :

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

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

  10. 10.당신은 오래된 브라우저를 지원하기 위해 jQuery를 사용하고 싶어하지 않으려면 :

    당신은 오래된 브라우저를 지원하기 위해 jQuery를 사용하고 싶어하지 않으려면 :

    function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

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

  11. 11.나는 IE9가 공식적으로 종료를 알고 우리는 위의 말하지만 난 그냥 그것을 배울 수 위가 많은 답변의 도움으로 classList없이 작동 방법을 배우려고 많은으로 element.classList 그것을 달성 할 수있다.

    나는 IE9가 공식적으로 종료를 알고 우리는 위의 말하지만 난 그냥 그것을 배울 수 위가 많은 답변의 도움으로 classList없이 작동 방법을 배우려고 많은으로 element.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');

  12. 12.나도 가장 빠른 방법은 ES5 같이 Element.prototype.classList를 사용하는 것입니다 생각 : ( ". my.super - 클래스") document.querySelector classList.add를 ( '새로운 클래스'). 하지만 Element.prototype.classList 같은 건 없다 IE8에서, 어쨌든이 미리보기와 함께 polyfill 수 있습니다 (편집 무료로 떨어졌다 그것을 개선) :

    나도 가장 빠른 방법은 ES5 같이 Element.prototype.classList를 사용하는 것입니다 생각 : ( ". my.super - 클래스") document.querySelector classList.add를 ( '새로운 클래스'). 하지만 Element.prototype.classList 같은 건 없다 IE8에서, 어쨌든이 미리보기와 함께 polyfill 수 있습니다 (편집 무료로 떨어졌다 그것을 개선) :

    경우 (Element.prototype.classList === 무효 0) { 함수 DOMTokenList (클래스, 자기) { 클래스에 대해서 typeof == "문자열"&& (클래스 = classes.split ( '')) 반면 (식에서 나타내지) { Array.prototype.pop.apply (이); } (이것은, 클래스) Array.prototype.push.apply; 이 .__ self__ =이 .__ self__ || 본인 } DOMTokenList.prototype.item = 기능 (인덱스) { 이 [인덱스] 리턴; } DOMTokenList.prototype.contains = 함수 (myClass가) { 위한 (VAR 난 식에서 나타내지 = - 1; I> = 0; I -) { 경우 (이 [I]는 myClass ===) { true를 반환; } } 반환 거짓 } DOMTokenList.prototype.add = 함수 (합니다 NewClass) { 경우 (this.contains (합니다 NewClass)) { 반환; } 이 .__ 자기 __ 클래스 명 + = (이 .__ 자기 __ 클래스 이름 "" ".?"). +합니다 NewClass; DOMTokenList.call (이,이 .__ 자기 __. 클래스 명) } DOMTokenList.prototype.remove = 함수 (oldClass) { 만약 (! this.contains (합니다 NewClass)) { 반환; } 이 [this.indexOf (oldClass) = 미정 이 자기 .__ __. this.join 클래스 명 = ( '') .replace (/ + / '') DOMTokenList.call (이,이 .__ 자기 __. 클래스 명) } DOMTokenList.prototype.toggle = 함수 (aClass) { 이 [this.contains (aClass)? '제거': '추가'(aClass) 리턴 this.contains (aClass); } DOMTokenList.prototype.replace = 함수 (oldClass,합니다 NewClass) { this.contains (oldClass) && this.remove (oldClass) && this.add (합니다 NewClass) } Object.defineProperty (Element.prototype, 'classList', { 수 : 기능 () { 새로운 DOMTokenList을 (this.className이) 반환; }, 열거 : 거짓 }) }

  13. 13.그냥 다른 사람이 말한에서 정교하게 여러 CSS 클래스는 공백으로 구분 된 하나의 문자열로 결합됩니다. 당신이 하드 코드를 원한다면 따라서, 단순히 다음과 같을 것이다 :

    그냥 다른 사람이 말한에서 정교하게 여러 CSS 클래스는 공백으로 구분 된 하나의 문자열로 결합됩니다. 당신이 하드 코드를 원한다면 따라서, 단순히 다음과 같을 것이다 :

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

    거기에서 당신은 쉽게 단지 APPEND 공간이 요소의 클래스 이름 속성에 새로운 클래스 다음에 ... 새로운 클래스를 추가하는 데 필요한 자바 스크립트를 유도 할 수있다. 이 알면, 당신은 또한 클래스가 나중에 필요가 발생한다 제거하는 함수를 작성할 수 있습니다.

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

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

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

  15. 15.당신은 jQuery를 유사 현대적인 접근 방법을 사용할 수 있습니다

    당신은 jQuery를 유사 현대적인 접근 방법을 사용할 수 있습니다

    당신이 변화에 하나의 요소 만이 필요한 경우, 첫 번째 JS는 DOM에서 찾을 것입니다, 당신은이를 사용할 수 있습니다 :

    document.querySelector ( 'someclass.') 클래스 명 + = "빨강."; .red { 색상 : 빨강; }

    클래스를 추가 할 DOM이 방법은 오직 첫 번째 요소를 "적색"

    로렘 입숨

    로렘 입숨

    로렘 입숨

    클래스 이름 앞에 하나 개의 공간을 남겨을 명심하십시오.

    당신은 새로운 클래스를 추가 할 여러 클래스가있는 경우는 다음과 같이 사용할 수 있습니다

    document.querySelectorAll ( '. someclass'). 대해 forEach (기능 (요소) { 는 element.ClassName + = "빨강"; }); .red { 색상 : 빨강; }

    이 방법이 DOM의 모든 요소에 클래스 "빨간색"추가 할 것 "someclass"클래스입니다.

    로렘 입숨

    로렘 입숨

    로렘 입숨

  16. 16.나는 우리가 브라우저의 DOM에서 실행할 수있는 순수 자바 스크립트를 사용하는 것이 더 좋다고 생각한다.

    나는 우리가 브라우저의 DOM에서 실행할 수있는 순수 자바 스크립트를 사용하는 것이 더 좋다고 생각한다.

    여기를 사용할 수있는 기능 방법입니다. 나는 ES6를 사용하지만 자바 스크립트 스타일 가이드를 맞는 중 ES5과 기능 식 또는 함수의 정의를 사용하여 주시기 바랍니다있다.

    '엄격한 사용' CONST oldAdd = (요소 클래스 명) => { 클래스 = element.className.split를 ( '')하자 경우 (classes.indexOf (클래스 명) <0) { classes.push (클래스 이름) } classes.join는 element.ClassName = ( '') } CONST oldRemove = (요소 클래스 명) => { 클래스 = element.className.split를 ( '')하자 CONST IDX = classes.indexOf (클래스 명) 경우 (IDX> -1) { classes.splice (IDX, 1) } classes.join는 element.ClassName = ( '') } CONST addClass = (요소 클래스 명) => { 경우 (element.classList) { element.classList.add (클래스 이름) } 다른 { oldAdd (요소 클래스 명) } } CONST removeClass = (요소 클래스 명) => { 경우 (element.classList) { element.classList.remove (클래스 이름) } 다른 { oldRemove (요소 클래스 명) } }

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

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

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

    두 번째 예에서 우리는 요소의 클래스 이름을 얻을 더 많은 일을 추가 할 수 있습니다.

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

  18. 18.Lodash를 사용하여 업데이트 클래스 이름 문자열을 원하는 사람들을 위해 :

    Lodash를 사용하여 업데이트 클래스 이름 문자열을 원하는 사람들을 위해 :

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

  19. 19.

    image1.parentNode.className+=' box';

    image1.parentNode.className + = '상자'; .box {폭 : 100 픽셀; 높이 : 100 픽셀; 배경 : 빨간색; }

  20. 20.

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

    또는:

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

    첫 번째 방법은 두 번째 방법이 작동하지 않는 경우 클래스를 추가하는 것을 도왔다. 첫 번째 방법에서 'someclassname'앞에 공백을 유지하는 것을 잊지 마십시오.

    제거를 위해 당신은 사용할 수 있습니다 :

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

  21. 21.첫째, 사업부에게 ID를 제공합니다. 그런 다음, 통화 기능 appendClass :

    첫째, 사업부에게 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>

  22. 22.당신은 당신의 요소를 선택하고 요소 및 매개 변수로 새로운 클래스 명으로 함수를 만들 API의 querySelector를 사용할 수 있습니다. IE8에 대한 다른 현대적인 브라우저 classlist 사용. 그럼 당신은 이벤트 후 함수를 호출 할 수 있습니다.

    당신은 당신의 요소를 선택하고 요소 및 매개 변수로 새로운 클래스 명으로 함수를 만들 API의 querySelector를 사용할 수 있습니다. IE8에 대한 다른 현대적인 브라우저 classlist 사용. 그럼 당신은 이벤트 후 함수를 호출 할 수 있습니다.

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

  23. 23.내 경우, 나는 하나 개의 클래스는 DOM의 메인 래퍼라는보다 더했지만, 난 단지 부모 메인 래퍼에 영향을하고 싶었다. 사용 : 1 선택기 (https://api.jquery.com/first-selector/), 내가 처음 일치하는 DOM 요소를 선택할 수 있습니다. 이것은 나를위한 솔루션했다 :

    내 경우, 나는 하나 개의 클래스는 DOM의 메인 래퍼라는보다 더했지만, 난 단지 부모 메인 래퍼에 영향을하고 싶었다. 사용 : 1 선택기 (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');
} );

    ( 'EQ (0)> DIV : EQ (1) # 상품의 인덱스> DIV') 당신은 내가 $를 사용하는 코드에서 볼 수 있듯이 나는 또한 내 DOM의 특정 div에의 두 번째 아이 같은 일을했다 .addClass ( 'doubleheaderredesign');

    참고 : 당신이 볼 수있는 내가 jQuery를 사용했다.

  24. 24.이 JS 코드는 나를 위해 작동

    이 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

    이 누군가에 도움이됩니다 희망

  25. 25.당신이 yuidom을 포함하는 경우 YUI에서, 당신은 사용할 수 있습니다

    당신이 yuidom을 포함하는 경우 YUI에서, 당신은 사용할 수 있습니다

    YAHOO.util.Dom.addClass ( 'div1', '클래스 이름');

    HTH

    26. from https://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 비활성화 된 입력의 이벤트  (0) 2020.09.24
[JQUERY] 채우기 고정 된 크기의 컨테이너에 크기 자동 동적 텍스트  (0) 2020.09.24
[JQUERY] 부트 스트랩 모달로 데이터를 전달  (0) 2020.09.23
[JQUERY] 로딩 후에 동적 HTML 클릭 이벤트를 추가 jQuery를 .live () CSTE 연구진 VS () 메소드  (0) 2020.09.23
[JQUERY] 텍스트 영역에서 jQuery를 설정 커서 위치  (0) 2020.09.23
,

티스토리툴바