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

사용자 도구

사이트 도구

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

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:javascript:javascript_note:classlist_property [2021/06/08 13:59]
emblim98 		wiki:javascript:javascript_note:classlist_property [2023/01/13 18:44] (현재)
줄 307: 줄 307:
 %%<div>%% 요소가 얼마나 많은 클래스 이름을 가지고 있는지 확인합니다.\\ %%<div>%% 요소가 얼마나 많은 클래스 이름을 가지고 있는지 확인합니다.\\
 <code javascript> <code javascript>
 +  <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>
 </code> </code>
  
줄 313: 줄 352:
 %%<div>%% 요소의 첫 번째 클래스 이름(index 0)을 가져옵니다.\\ %%<div>%% 요소의 첫 번째 클래스 이름(index 0)을 가져옵니다.\\
 <code javascript> <code javascript>
 +  <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>
 </code> </code>
  
줄 319: 줄 398:
 요소가 "mystyle" 클래스를 가지고 있는지를 확인합니다.\\ 요소가 "mystyle" 클래스를 가지고 있는지를 확인합니다.\\
 <code javascript> <code javascript>
 +  <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>
 </code> </code>
 +
 +====Example====
 +요소에 "mystyle" 클래스의 유무를 확인합니다. 있다면, 다른 클래스 이름을 제거합니다.\\
 +<code javascript>
 +<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>
 +</code>
 +
 +====Example====
 +클래스 사이의 토글 기능으로 드롭다운 버튼을 생성합니다.\\
 +<code javascript>
 +<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>
 +</code>
 +
 +====Fallback Example: add====
 +IE9 및 이전 버전에서 %%classList.**add()**%% 메서드를 사용하는 경우를 위한 크로스-브라우저 솔루션:\\
 +<code javascript>
 +<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>
 +</code>
 +
 +====Fallback Exmaple: remove====
 +IE9 및 이전 버전에서 %%classList.**remove()**%% 메서드를 사용하는 경우를 위한 크로스-브라우저 솔루션:\\
 +<code javascript>
 +  <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>
 +</code>
 +
 +====Fallback Example: contains====
 +IE9 및 이전 버전에서 %%classList.**contains()**%% 메서드를 사용하는 경우를 위한 크로스-브라우저 솔루션:\\
 +<code javascript>
 +  <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>
 +</code>
 +
 +====Fallback Example: toggle====
 +IE9 및 이전 버전에서 %%classList.**toggle()**%% 메서드를 사용하는 경우를 위한 크로스-브라우저 솔루션:\\
 +<code javascript>
 +  <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>
 +</code>
 +
 +====Example====
 +스티키 네비게이션 바 (sticky navigation bar) 만들기\\
 +<code javascript>
 +<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>
 +</code>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
  
/volume1/web/dokuwiki/data/attic/wiki/javascript/javascript_note/classlist_property.1623128395.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