차이

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

--- wiki:javascript:javascript_note:classlist_property [2021/06/08 17:16]
emblim98 [Fallback Exmaple: remove]
+++ wiki:javascript:javascript_note:classlist_property [2023/01/13 18:44] (현재)
@@ 줄 659: / 줄 659: @@
     <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>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>
@@ 줄 684: / 줄 686: @@
 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>
@@ 줄 690: / 줄 728: @@
 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>
@@ 줄 696: / 줄 780: @@
 스티키 네비게이션 바 (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>

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

사용자 도구

사이트 도구

차이

문서 도구