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

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	리스트에서 클래스의 개수를 반환합니다.
length	이 속성은 읽기 전용입니다.

Methods

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

	클래스를 제거합니다: element.classList.toggle(“classToRemove”, false);
	클래스를 추가합니다: element.classList.toggle(“classToAdd”, true);
	클래스를 추가합니다: 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

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

<head>
    <style>
      .dropbtn {
        background-color: #4caf50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
      }
 
      .dropbtn:hover,
      .dropbtn:focus {
        background-color: #3e8e41;
      }
 
      .dropdown {
        position: relative;
        display: inline-block;
      }
 
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        overflow: auto;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
      }
 
      .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }
 
      .dropdown-content a:hover {
        background-color: #f1f1f1;
      }
 
      .show {
        display: block;
      }
    </style>
  </head>
  <body>
    <h2>Clickable Dropdown</h2>
    <p>Click on the button to open the dropdown menu.</p>
 
    <div class="dropdown">
      <button id="myBtn" class="dropbtn">Dropdown</button>
      <div id="myDropdown" class="dropdown-content">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
      </div>
    </div>
 
    <script>
      // Get the button, and when the user clicks on it, execute myFunction
      document.getElementById('myBtn').onclick = function () {
        myFunction();
      };
 
      /* myFunction toggles between adding and removing the show class, 
      which is used to hide and show the dropdown content */
      function myFunction() {
        document.getElementById('myDropdown').classList.toggle('show');
      }
      /* 버튼을 클릭하면 <div id="myDropdown" class="dropdown-content">와 
        <div id="myDropdown" class="dropdown-content show">사이에서 토글 기능이 실행된다. */
    </script>
  </body>

Fallback Example: add

IE9 및 이전 버전에서 classList.**add()** 메서드를 사용하는 경우를 위한 크로스-브라우저 솔루션:

<head>
    <style>
      .mystyle {
        width: 300px;
        height: 50px;
        background-color: coral;
        color: white;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Cross-browser solution for classList.add()</h2>
    <p>The classList property is not supported in Internet Explorer 9 and earlier.</p>
    <p>In this example, we check if the browser supports the classList.add() method.
    If not, use the className property instead to achieve the same result 
    (for IE9 and earlier).</p>
 
    <p>Click the button to add the class "mystyle" to the DIV element.</p>
 
    <button onclick="myFunction()">Try it</button>
 
    <div id="myDIV">I am a DIV element</div>
 
    <p id="demo"></p>
 
    <script>
      function myFunction() {
        var x, name, arr;
        x = document.getElementById('myDIV');
 
        if (x.classList) {
          x.classList.add('mystyle');
        } else {
          name = 'mystyle';
          arr = x.className.split(' ');
          if (arr.indexOf(name) == -1) {
            x.className += ' ' + name;
          }
        }
        console.log(x.classList); // DOMTokenList ["mystyle", value: "mystyle"]
        console.log(x.classList.add('mystyle'));
        console.log(x.className); // mystyle
        console.log(x.className.split(' ')); // ["mystyle"]
        console.log(myDIV); // <div id="myDIV" class="mystyle">I am a DIV element</div>
        console.log(x); // <div id="myDIV" class="mystyle">I am a DIV element</div>
        console.log(name); // undefined
        console.log(arr); // undefined
        console.log((arr = x.className)); // mystyle
        console.log(arr.indexOf(name)); // -1
        console.log(arr.indexOf(name) == -1); // true
      }
      /* indexOf() 메서드는 검색할 값이 발생하지 않으면 -1을 반환합니다. */
      /* split() 메서드는 문자열을 하위 문자열 배열로 분할하는데 사용되며 새 배열을 반환합니다. */
      /*
      function myFunction() {
        document.getElementById('myDIV').classList.add('mystyle');
      }
      */
    </script>
  </body>

Fallback Exmaple: remove

IE9 및 이전 버전에서 classList.**remove()** 메서드를 사용하는 경우를 위한 크로스-브라우저 솔루션:

  <head>
    <style>
      .mystyle {
        width: 300px;
        height: 50px;
        background-color: greenyellow;
        color: black;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Cross-browser solution for classList.remove()</h2>
    <p>The classList property is not supported in Internet Explorer 9 and earlier.</p>
    <p>In this example, we check if the browser supports the classList.remove() method.
    If not, the regular expression works as a fallback to achieve the same result 
    (for IE9 and earlier).</p>
 
    <p>Click the button to remove the class "mystyle" from DIV.</p>
 
    <button onclick="myFunction()">Try it</button>
 
    <div id="myDIV" class="mystyle">I am a DIV element</div>
 
    <script>
      function myFunction() {
        var x = document.getElementById('myDIV');
        if (x.classList) {
          x.classList.remove('mystyle'); // undefined, fasle
        } else {
          x.className = x.className.replace(/\bmystyle\b/g, '');
        }
      }
    </script>
    <p>In JavaScript, the boolean value of undefined is false</p>
  </body>

Fallback Example: contains

IE9 및 이전 버전에서 classList.**contains()** 메서드를 사용하는 경우를 위한 크로스-브라우저 솔루션:

  <head>
    <style>
      .mystyle {
        width: 300px;
        height: 50px;
        background-color: blue;
        color: white;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Cross-browser solution for classList.remove()</h2>
    <p>The classList property is not supported in Internet Explorer 9 and earlier.</p>
    <p>In this example, we check if the browser supports the classList.contains() method. If not, the regular expression works as a fallback to achieve the same result (for IE9 and earlier).</p>
 
    <p>Click the button to find out if the DIV element has a "mystyle" class.</p>
 
    <button onclick="myFunction()">Try it</button>
 
    <div id="myDIV" class="mystyle">I am a DIV element</div>
 
    <p id="demo"></p>
 
    <script>
      function myFunction() {
        var x = document.getElementById('myDIV');
 
        if (x.classList) {
          alert(x.classList.contains('mystyle'));
        } else {
          alert(/\bmystyle\b/g.test(x.className));
        }
      }
    </script>
    <p>In JavaScript, the boolean value of undefined is false</p>
  </body>

Fallback Example: toggle

IE9 및 이전 버전에서 classList.**toggle()** 메서드를 사용하는 경우를 위한 크로스-브라우저 솔루션:

  <head>
    <style>
      .mystyle {
        width: 300px;
        height: 50px;
        background-color: blue;
        color: white;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Cross-browser solution for classList.toggle()</h2>
    <p>The classList property is not supported in Internet Explorer 9 and earlier.</p>
    <p>
      In this example, we check if the browser supports the classList.toggle() method.
      If not, use the className property together with other JS properties and methods
      to achieve the same result (for IE9).
    </p>
 
    <p>Click the button to toggle between adding and methods to achieve 
    the same result (for IE9)</p>
 
    <button onclick="myFunction()">Try it</button>
 
    <div id="myDIV">I am a DIV element</div>
 
    <p id="demo"></p>
 
    <script>
      function myFunction() {
        var x = document.getElementById('myDIV');
 
        if (x.classList) {
          x.classList.toggle('mystyle');
        } else {
          var classes = x.className.split(' ');
          var i = classes.indexOf('mystyle');
 
          if (i >= 0) classes.splice(i, 1);
          else classes.push('mystyle');
          x.className = classes.join(' ');
        }
      }
    </script>
    <p>In JavaScript, the boolean value of undefined is false</p>
  </body>

Example

스티키 네비게이션 바 (sticky navigation bar) 만들기

<head>
    <style>
      body {
        margin: 0;
        font-size: 28px;
      }
 
      .header {
        background-color: #f1f1f1;
        padding: 30px;
        text-align: center;
      }
 
      #navbar {
        overflow: hidden;
        background-color: #333;
      }
 
      #navbar a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
      }
 
      #navbar a:hover {
        background-color: #ddd;
        color: #000;
      }
 
      #navbar a.active {
        background-color: #4caf50;
        color: white;
      }
 
      .content {
        padding: 16px;
      }
 
      .sticky {
        position: fixed;
        top: 0;
        width: 100%;
      }
 
      .sticky + .content {
        padding-top: 60px;
      }
    </style>
  </head>
  <body onscroll="myFunction()">
    <div class="header">
      <h2>Scroll Down</h2>
      <p>Scroll down to see the sticky effect.</p>
    </div>
 
    <div id="navbar">
      <a href="javascript:void(0)" class="active">Home</a>
      <a href="javascript:void(0)">News</a>
      <a href="javascript:void(0)">Contact</a>
    </div>
 
    <div class="content">
      <h3>Sticky Navigation Example</h3>
      <p>The navbar will stick to the top when you reach its scroll position.</p>
      <p>
        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te,
        id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
        Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
      </p>
      <p>
        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
        id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
        Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
      </p>
      <p>
        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te,
        id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
        Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
      </p>
      <p>
        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
        id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
        Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
      </p>
      <p>
        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
        id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur
        his ad. Eum no molestiae voluptatibus.
      </p>
    </div>
 
    <script>
      // Get the navbar
      var navbar = document.getElementById('navbar');
 
      // Get the offset position of the navbar
      var sticky = navbar.offsetTop;
 
      // Add the sticky class to the navbar when you reach its scroll position. 
      Remove the sitcky class when you leave the scroll position.
      function myFunction() {
        if (window.pageYOffset >= sticky) {
          navbar.classList.add('sticky');
        } else {
          navbar.classList.remove('sticky');
        }
      }
    </script>
  </body>

오션,, Javascript, HTML, DOM, classList, Property

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

목차

Javascript HTML DOM classList Property

The source of the article

Example

Definition and Usage

Syntax

Properties

Methods

Technical Details

More Examples

Example

Example

Example

Example

Example

Example

Example

Example

Example

Example

Fallback Example: add

Fallback Exmaple: remove

Fallback Example: contains

Fallback Example: toggle

Example

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

사용자 도구

사이트 도구

목차

Javascript HTML DOM classList Property

The source of the article

Example

Definition and Usage

Syntax

Properties

Methods

Technical Details

More Examples

Example

Example

Example

Example

Example

Example

Example

Example

Example

Example

Fallback Example: add

Fallback Exmaple: remove

Fallback Example: contains

Fallback Example: toggle

Example

문서 도구