javascript _Event-toggle

denmark-choco·2020년 5월 23일
0

code-states_3주차

목록 보기
8/9

[Event-toggle 예제]

1. Form을 만든다.

    <h1>이벤트 연습하기</h1>
    <button class="colorChange">빨강</button>

2. toggle이벤트를 작성한다.

버튼을 누르면 클래스명이 생겼다가 없어졌다가 반복되면서 색변경이 된다.

let text = document.querySelector("h1");
let button = document.querySelector(".colorChange");

function Change() {
  text.classList.toggle("color");
}

button.addEventListener("click", Change);

3. css에 class를 미리 지정한다.

.color {
  color: red;
}
profile
codestates_2020.05.04~ing // 이제 걸음마를 시작한 초보 개발자입니다. 혹 잘못된 부분을 발견하신다면 언제든지 말씀부탁드립니다^^!!

0개의 댓글