[DOM_Element] JS - classList 속성 ★★ - 요소의 클래스리스트. (= classList속성 = 클리스리스트속성) (IE10) ※ 상단슬라이드모달 ※ 지정요소에 클래스 추가

1. className vs. classList.add() 차이 
2. classList 예제 - 클릭 시 .hz 클래스 추가
3. classList 예제 - 클릭 시 (보이기/숨기기) 토글 처리
4. classList 예제 - 위에서 미끄러져 내러오는 모달 (= 상단 슬라이드 모달)

className vs. classList.add() 차이

 

Element.className = 'class names'

기존에 class가 없으면 추가해 넣고, 있으면 기존 것을 변경.

 

Element.classList.add('class names')

기존 class에 새로운 클래스를 추가.

 

classList 예제 - 클릭 시 .hz 클래스 추가

 

<style>

.hz {

  width: 300px;

  line-height: 50px;

  background-color: tomato;

  color: white;

  font-size: 25px;

  text-align:center;

}

</style>

<button onclick="homzzang()">클릭</button>

<div id="box">홈짱닷컴 Homzzang.com</div>

<script>

function homzzang() {

  document.getElementById("box").classList.add("hz");

}

</script>

 

결과보기

classList 예제 - 클릭 시 (보이기/숨기기) 토글 처리

 

<style>

div {display:none}

div.active {display:block;}

</style>

<button>클릭</button>

<div>홈짱닷컴 Homzzang.com</div>

<script>

const btn = document.querySelector('button');

const div = document.querySelector('div');

btn.addEventListener('click', ()=>{

  div.classList.toggle('active');

});

</script>

 

결과보기

주의: script 부분이 태그 위로 올라가면 작동 X

PS. 엘리 님 강의 https://youtu.be/X91jsJyZofw

classList 예제 - 위에서 미끄러져 내러오는 모달 (= 상단 슬라이드 모달)

 

<style>

html, body {

  padding: 0px;

  margin: 0px;

  background: #444;

  font-family: 'Ubuntu', sans-serif;

  color: #FFF;

  width: 100%;

  height: 100%;

}

body {

  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/teddy-kelley-70636.jpg");

  background-position: center;

  background-size: cover;

}

.clearfix *:after {

  content: '';

  clear: both;

  display: table;

}

* {

  box-sizing: border-box;

}

.modal {

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  opacity: 0;

  transition: opacity 0.5s;

  -webkit-animation: 1s hide infinite;

          animation: 1s hide infinite;

  -webkit-animation-delay: 0.5s;

          animation-delay: 0.5s;

}

.modal:target, .modal.force {

  -webkit-transform: translateY(0px);

          transform: translateY(0px);

  opacity: 1;

  -webkit-animation: none;

          animation: none;

}

.modal:target .view, .modal.force .view {

  transition: all 1s eas-in-out;

  -webkit-transform: translateY(0px);

          transform: translateY(0px);

}

.modal .background {

  position: absolute;

  width: 100%;

  height: 100%;

  position: absolute;

  left: 0px;

  top: 0px;

  background: #000;

  opacity: 0.5;

}

.modal .view-container {

  padding: 20px;

}

.modal .view {

  transition: all 1s ease-in-out;

  -webkit-transform: translateY(-100%);

          transform: translateY(-100%);

  position: relative;

  margin: 50px auto;

  max-width: 600px;

  border: 2px solid #FFF;

  border-radius: 2px;

  -webkit-backdrop-filter: blur(8px);

          backdrop-filter: blur(8px);

  background: rgba(0, 0, 0, 0.5);

}

.modal .view .content {

  position: relative;

  min-height: 100px;

  padding: 10px;

}

.modal .view .header {

  padding: 16px 10px;

  border-radius: 3px 3px 0px 0px;

  border-bottom: 2px solid #FFF;

  background: rgba(0, 0, 0, 0.75);

}

.modal .view .header * {

  margin: 0px;

}

.modal .view .header a.close {

  position: absolute;

  right: 10px;

  top: 7px;

  text-decoration: none;

  color: #FFF;

  -webkit-transform: rotateZ(45deg);

          transform: rotateZ(45deg);

  -webkit-transform-style: preserve-3d;

          transform-style: preserve-3d;

}

.modal .view .header a.close:before {

  content: '+';

  font-size: 28px;

}

.modal .view .header a.close:hover {

  opacity: 0.5;

}

.button {

  margin: 10px;

  padding: 10px 20px;

  border: 2px solid #FFF;

  border-radius: 3px;

  background: transparent;

  color: white;

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;

  display: inline-block;

}

.button.primary {

  background: rgba(255, 255, 255, 0.2);

}

.button:hover {

  background: rgba(255, 255, 255, 0.5);

}

.pull-right {

  float: right;

  margin-left: 0px;

}

@-webkit-keyframes hide {

  0%, 100% {

    -webkit-transform: translateY(-100%);

            transform: translateY(-100%);

  }

}

@keyframes hide {

  0%, 100% {

    -webkit-transform: translateY(-100%);

            transform: translateY(-100%);

  }

}

</style>

 

---

 

<a class="button" href="#modal">Open</a>

<div class="modal clearfix" id="modal">

  <div class="background"></div>

  <div class="view-container">

    <div class="view">

      <div class="header">  

        <p>Hi! You opened up this modal!</p><a class="close" href="#"></a>

      </div>

      <div class="content"> 

        <p>Please hit save or cancel.  Nothing will happen!</p>

      </div>

      <div class="footer"><a class="button pull-right" href="#">Cancel</a><a class="button primary pull-right" href="#">Save</a></div>

    </div>

  </div>

</div>

 

---

<script>

var modal = document.querySelector('#modal');

setTimeout(function(){

   modal.classList.add('force');

}, 2000);

setTimeout(function(){

   modal.classList.remove('force');

}, 3000);

</script>

 

결과보기

https://codepen.io/sean_codes/pen/XMdgEr