문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » javascript » javascript_note » classlist_property
wiki:javascript:javascript_note:classlist_property

문서의 이전 판입니다!

목차

Javascript HTML DOM classList Property

  • description : Javascript HTML DOM classList Property
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-06-08


The source of the article

Javascript HTML DOM classList Property

Example

<div> 요소에 “mystyle” 클래스를 추가합니다.

  <head>
    <style>
      .mystyle {
        width: 300px;
        height: 50px;
        background-color: coral;
        color: white;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to add the "mystyle" class to DIV.</p>
 
    <button onclick="myFunction()">Try it</button>
 
    <p><strong>Note:</strong> The classList property is not supported in Internet Explorer 9 and earlier versions.</p>
 
    <div id="myDIV">I am a DIV element</div>
 
    <script>
      function myFunction() {
        document.getElementById('myDIV').classList.add('mystyle');
        /* 버튼 클릭 시 mystyle클래스가 myDIV 에 추가됨 */
      }
    </script>
  </body>

Definition and Usage

classList 속성은 요소의 클래스 이름을 DOMTokenList 객체로 반환합니다.

이 속성은 요소에 CSS 클래스를 추가, 제거 및 토글(toggle)하는 데 유용합니다.

classList 속성은 읽기 전용이지만 add() 및 remove() 메서드를 사용하여 수정할 수 있습니다.

크로스-브라우저 솔루션: IE9 및 이전 버전에서는 classList 속성이 지원되지 않습니다.
그러나 크로스-브라우저 솔루션을 위한 className 속성 또는 정규식(regular expression)을 사용할 수 있습니다.

Syntax

element.classList

Properties

Property Description
length 리스트에서 클래스의 개수를 반환합니다.
이 속성은 읽기 전용입니다.

Methods

Method Description
add(class1, class2,…) 요소에 하나 이상의 클래스 이름을 추가합니다.
지정한 클래스가 이미 존재할 경우, 해당 클래스는 추가되지 않습니다.
contains(class) 요소에 지정된 클래스 이름이 있는지 여부를 나타내는 불리언 값을 반환합니다.
가능한 값:
true - 해당 요소는 지정된 클래스 이름을 가지고 있습니다.
false - 해당 요소는 지정된 클래스 이름을 가지고 있지 않습니다.
item(index) 요소로부터 지정 인덱스 번호를 가진 클래스 이름을 반환합니다. 인텍스는 0부터 시작합니다.
인덱스 번호가 범위를 벗어날 경우 null을 반환합니다.
remove(class1, class2,…) 요소로부터 하나 이상의 클래스 이름을 제거합니다.
Note: 존재하지 않는 클래스를 제거해도 오류가 발생하지 않습니다.
toggle(class, true or false) 요소의 클래스 이름 사이에서 토글합니다.
첫 번째 매개변수는 요소에서 지정 클래스를 제거하고 false를 반환합니다.
해당 클래스가 존재하지 않을 경우, 요소에 추가되고, 반환 값은 true입니다.
선택할 수 있는 두 번째 매개변수는 이미 존재하고 있는 지의 여부와 상관없이 클래스가 추가 또는 삭제되게 하는 불리언 값입니다. 예를 들어
클래스를 제거합니다: element.classList.toggle(“classToRemove”, false);
클래스를 추가합니다: element.classList.toggle(“classToAdd”, true);
Note: 두 번째 매개변수는 Internet Explorer 또는 Opera 12와 이전 버전에서 지원되지 않습니다.

Technical Details

Return Value 요소의 클래스 명 리스트를 포함하는 DOMTokenList

More Examples

Example

<div> 요소에 다수의 클래스를 추가합니다.

  <head>
    <style>
      .mystyle {
        width: 500px;
        height: 50px;
        padding: 15px;
        border: 5px solid dodgerblue;
      }
 
      .anotherClass {
        background-color: coral;
        color: white;
      }
 
      .thirdClass {
        text-transform: uppercase;
        text-align: center;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to add multiple classes to DIV.</p>
 
    <button onclick="myFunction()">Try it</button>
 
    <p><strong>Note:</strong> The classList property is not supported 
    in Internet Explorer 9 and earlier versions.</p>
 
    <div id="myDIV">I am a DIV element.</div>
 
    <script>
      function myFunction() {
        document.getElementById('myDIV').classList.add('mystyle', 'anotherClass', 'thirdClass');
      }
      /* 버튼 클릭 시 <div id="myDIV">I am a DIV element.</div>는 
      <div id="myDIV" class="mystyle anotherClass thirdClass"> 로 변경되고 CSS가 적용됨*/
    </script>
  </body>

Example

<div> 요소에서 클래스를 제거합니다.

  <head>
    <style>
      .mystyle {
        width: 500px;
        height: 50px;
        background-color: forestgreen;
        color: white;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to remove the "mystyle" class from DIV.</p>
 
    <button onclick="myFunction()">Try it!</button>
 
    <p><strong>Note:</strong> The classList property is not supported 
    in Internet Explorer 9 and earlier versions.</p>
 
    <div id="myDIV" class="mystyle">I am a DIV element.</div>
 
    <script>
      function myFunction() {
        document.getElementById('myDIV').classList.remove('mystyle');
      } /* 버튼 클릭 시 #myDIV에 적용된 .mystyle을 제거함. */
    </script>
  </body>

Example

<div> 요소에서 다수의 클래스를 제거합니다.

  <head>
    <style>
      .mystyle {
        width: 500px;
        height: 50px;
        padding: 15px;
        border: 5px solid dodgerblue;
      }
 
      .anotherClass {
        background-color: coral;
        color: white;
      }
 
      .thirdClass {
        text-transform: uppercase;
        text-align: center;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to remove multiple classes to DIV.</p>
 
    <button onclick="myFunction()">Try it</button>
 
    <p><strong>Note:</strong> The classList property is not supported 
    in Internet Explorer 9 and earlier versions.</p>
 
    <div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element.</div>
 
    <script>
      function myFunction() {
        document.getElementById('myDIV').classList.remove('mystyle', 'anotherClass', 'thirdClass');
      }
      /* 버튼 클릭 시 <div id="myDIV" class="mystyle anotherClass thirdClass">는 
        <div id="myDIV">I am a DIV element.</div>로 변경되고 CSS 적용이 취소됨*/
    </script>
  </body>

Example

<div> 요소를 위한 두 개의 클래스 사이에서 토글 기능

  <head>
    <style>
      .mystyle {
        width: 300px;
        height: 50px;
        background-color: coral;
        color: white;
        font-size: 25px;
      }
 
      .newClassName {
        width: 400px;
        height: 100px;
        background-color: lightblue;
        text-align: center;
        font-size: 25px;
        color: navy;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to toggle between two classes.</p>
 
    <button onclick="myFunction()">Try it</button>
 
    <p><strong>Note:</strong> The classList property is not supported 
    in Internet Explorer 9 and earlier versions.</p>
 
    <div id="myDIV" class="mystyle">I am a DIV element.</div>
 
    <script>
      function myFunction() {
        document.getElementById('myDIV').classList.toggle('newClassName');
      }
      /* 버튼을 클릭할 때 마다 <div id="myDIV" class="mystyle">와 
      <div id="myDIV" class="mystyle newClassName">사이에서 토글 기능이 실행됨 */
    </script>
  </body>

Example

<div> 요소의 클래스 이름을 가져옵니다.

  <head>
    <style>
      .mystyle {
        width: 500px;
        height: 50px;
      }
 
      .anotherClass {
        background-color: lightblue;
      }
 
      .thirdClass {
        text-align: center;
        font-size: 25px;
        color: black;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to display the class names of the div element.</p>
 
    <div id="myDIV" class="mystyle anotherClass thirdClass">
    I am a DIV element with multiple classes.</div>
 
    <button onclick="myFunction()">Try it</button>
 
    <p><strong>Note:</strong> The classList property is not supported
     in Internet Explorer 9 and earlier versions.</p>
 
    <p id="demo"></p>
 
    <script>
      function myFunction() {
        var x = document.getElementById('myDIV').classList;
        document.getElementById('demo').innerHTML = x;
      }
      /* mystyle anotherClass thirdClass */
      /* 버튼을 클릭하면 id="myDIV"가 있는 div의 클래스 이름을 가져와서 표시한다. */
    </script>
  </body>

Example

<div> 요소가 얼마나 많은 클래스 이름을 가지고 있는지 확인합니다.

  <head>
    <style>
      .mystyle {
        width: 500px;
        height: 50px;
      }
 
      .anotherClass {
        background-color: lightblue;
      }
 
      .thirdClass {
        text-align: center;
        font-size: 25px;
        color: black;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to display the number of class names the div element has.</p>
 
    <div id="myDIV" class="mystyle anotherClass thirdClass">
    I am a DIV element with three classes.</div>
 
    <button onclick="myFunction()">Try it</button>
 
    <p><strong>Note:</strong> The classList property is not supported 
    in Internet Explorer 9 and earlier versions.</p>
 
    <p id="demo"></p>
 
    <script>
      function myFunction() {
        var x = document.getElementById('myDIV').classList.length;
        document.getElementById('demo').innerHTML = x;
      }
      /* 버튼을 클릭하면 id="myDIV"가 있는 div의 클래스의 길이를 표시한다. */
    </script>
  </body>

Example

<div> 요소의 첫 번째 클래스 이름(index 0)을 가져옵니다.

  <head>
    <style>
      .mystyle {
        width: 500px;
        height: 50px;
      }
 
      .anotherClass {
        background-color: lightblue;
      }
 
      .thirdClass {
        text-align: center;
        font-size: 25px;
        color: black;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to display the class name of the first class(index 0) of div.</p>
 
    <div id="myDIV" class="mystyle anotherClass thirdClass">
    I am a DIV element with three classes.</div>
 
    <button onclick="myFunction()">Try it</button>
 
    <p><strong>Note:</strong> The classList property is not supported 
    in Internet Explorer 9 and earlier versions.</p>
 
    <p id="demo"></p>
    <!-- mystyle -->
 
    <script>
      function myFunction() {
        var x = document.getElementById('myDIV').classList.item(0);
        document.getElementById('demo').innerHTML = x;
      }
      /* 버튼을 클릭하면 id="myDIV"가 있는 div의 첫 번째 클래스 이름을 표시한다. */
    </script>
  </body>

Example

요소가 “mystyle” 클래스를 가지고 있는지를 확인합니다.

  <head>
    <style>
      .mystyle {
        width: 500px;
        height: 50px;
        border: 1px solid black;
      }
 
      .anotherClass {
        background-color: lightblue;
        padding: 25px;
      }
 
      .thirdClass {
        text-align: center;
        font-size: 25px;
        color: navy;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to find out if the DIV element has a class of "mystyle".</p>
 
    <div id="myDIV" class="mystyle anotherClass thirdClass">
    I am a DIV element with three classes.</div>
 
    <button onclick="myFunction()">Try it</button>
 
    <p><strong>Note:</strong> The classList property is not supported
     in Internet Explorer 9 and earlier versions.</p>
 
    <p id="demo"></p>
    <!-- true -->
 
    <script>
      function myFunction() {
        var x = document.getElementById('myDIV').classList.contains('mystyle');
        document.getElementById('demo').innerHTML = x;
      }
      /* 버튼을 클릭하면 id="myDIV"가 있는 div에 mystyle이 있는지 여부를 확인하고, 
      있으니까 true를 반환한다.. */
    </script>
  </body>

Example

요소에 “mystyle” 클래스의 유무를 확인합니다. 있다면, 다른 클래스 이름을 제거합니다.

<head>
    <style>
      .mystyle {
        width: 500px;
        height: 50px;
        border: 1px solid black;
      }
 
      .anotherClass {
        background-color: lightblue;
        padding: 25px;
      }
 
      .thirdClass {
        text-align: center;
        font-size: 25px;
        color: navy;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to find out if the DIV element has a class of "mystyle". 
    If so, remove "anotherClass".</p>
 
    <div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>
 
    <button onclick="myFunction()">Try it</button>
 
    <p><strong>Note:</strong> The classList property is not supported 
    in Internet Explorer 9 and earlier versions.</p>
 
    <script>
      function myFunction() {
        var x = document.getElementById('myDIV');
 
        if (x.classList.contains('mystyle')) {
          x.classList.remove('anotherClass');
        } else {
          alert('Could not find it.');
        }
      }
      /* 버튼을 클릭하면 mystyle이 들어있는지 확인하고, 
      <div id="myDIV" class="mystyle anotherClass thirdClass">에서 
      anotherClass를 제거해서 <div id="myDIV" class="mystyle thirdClass">로 변경되고 
      배경색과 패딩이 사라짐 */
    </script>
  </body>

Example

클래스 사이의 토글 기능으로 드롭다운 버튼을 생성합니다.

 
, , , , ,
/volume1/web/dokuwiki/data/attic/wiki/javascript/javascript_note/classlist_property.1623130368.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki