ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 박스 모양의 색깔 바꾸기
    카테고리 없음 2020. 2. 21. 01:26

    HTML

    <div class = "box">
      <button class = "button">
        black
      </button>
    </div>

     

    CSS

    .box {
      border: 1px solid; 
      width: 100px; 
      height: 100px;
    }
    
    .button {
      color: white;
      background-color: black;
    }

     

    Javascript 

    const box = document.querySelector('.box');
    const button = document.querySelector('.button');
    
    button.addEventListener('click', (ev) => {
      if (ev.target.innerText === 'black') {
        ev.target.style.color = 'black';
        ev.target.style.backgroundColor = 'white';
        ev.target.innerText = 'white';
        box.style.backgroundColor = 'black';
      } else {
        ev.target.style.color = 'white';
        ev.target.style.backgroundColor = 'black';
        ev.target.innerText = 'black';
        box.style.backgroundColor = 'white';
      }
    });
    

     

     

     

    댓글 0

Designed by Tistory.