• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
DOM_Element JS - attr.nodeType -
DOM_Element JS - Element 객체 - 요소객체 (속성 + 메서드) 종류
DOM_Element JS - accessKey 속성 - 요소접근키 (= accessKey속성 = 액세스키속성) ※ 요소접근단축키
DOM_Element JS - addEventListener() 메서드 ★ - 요소에 이벤트 걸기. (addEventListene…
DOM_Element JS - appendChild() 메서드 - 요소에 마지막 자식요소생성 (= 마지막 자식요소추가 = appe…
DOM_Element JS - attributes 속성 - 요소의 속성들 (= 요소속성모음 = attributes속성 = 어트리뷰…
DOM_Element JS - blur() 메서드 - 포커스 제거. (= blur메서드 = 블러 메서드) ※ 링크 클릭 잔상 제…
DOM_Element JS - childElementCount 속성 - 자식요소개수 (IE9 이상)
DOM_Element JS - childNodes 속성 - 자식노드리스트
DOM_Element JS - children 속성 ★ - 자식요소노드 (IE9 이상)
DOM_Element JS - classList 속성 ★★ - 요소의 클래스리스트. (= classList속성 = 클리스리스트속성…
DOM_Element JS - className 속성 ★★★ = 요소의 클래스명 반환/설정. (= className속성 = 클래스…
DOM_Element JS - click() 메서드 ★★★★★ - 마우스클릭간주 (= 클릭이벤트 = click메서드 = 클릭메서드…
DOM_Element JS - clientHeight 속성 - 요소높이 (= 요소가시높이) (padding 포함 / border,…
DOM_Element JS - clientLeft 속성 - 요소왼쪽테두리너비 (= 요소좌측테두리너비)
DOM_Element JS - clientTop 속성 - 요소위쪽테두리너비 (= 요소상단테두리너비)
DOM_Element JS - clientWidth 속성 ★ - 요소너비 (= 요소가시너비 = clientWidth속성 = 클라이…
DOM_Element JS - cloneNode() 메서드 - 노드복사
DOM_Element JS - compareDocumentPosition() 메서드 - 노드간 위치비교 (IE9 이상)
DOM_Element JS - contains() 메서드 ★ - 자손노드인지 판별 (= contains메서드 = 컨테인즈 메서드)
1/5
목록
찾아주셔서 감사합니다. Since 2012