클래스 탈부착

송현민·2025년 1월 13일

html

  <body>
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <span class="navbar-brand">Navbar</span>
          <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </nav> 
      <ul class="list-group">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
        <li class="list-group-item">A fourth item</li>
        <li class="list-group-item">And a fifth one</li>
      </ul>
      <script>
        document.getElementsByClassName('navbar-toggler')[0].addEventListener('click',function(){
            document.getElementsByClassName('list-group')[0].classList.add('show');
        })
      </script>
  </body>

css

.list-group{
    display: none;
}
.show{
    display: block;
}

확장

     <script>
        document.getElementsByClassName('navbar-toggler')[0].addEventListener('click',function(){
            document.getElementsByClassName('list-group')[0].classList.toggle('show');
        })
      </script>

위와 같이 사용하면 클래스명이 있으면 제거 없으면 붙여준다.

querySelector()

     <ul class="list-group">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
        <li class="list-group-item">A fourth item</li>
        <li class="list-group-item">And a fifth one</li>
      </ul>

여기서
.document.querySelector('.list-group')
.document.querySelector('.list-group-item')
->

<li class="list-group-item">An item</li>

.document.querySelectorALL('list-group-item)
-> 모든 요소

.document.querySelector('.list-group-item').[2]
->

<li class="list-group-item">A third item</li>

송현민

이전 포스트

이벤트리스너

다음 포스트

클래스 탈부착

이벤트리스너

jQuery

0개의 댓글