[DOM 조작하기] Class 변경

하고 싶은 것

• 특정 hmtl 요소의 스타일 변경
• 로그인 기능 구현 시 id, password 모두 입력 되었을 경우 로그인 버튼 활성화 하고자 합니다.

html

<input type="text" id="txtLoginId" placeholder="전화번호, 사용자 이름 또는 이메일" />
<input type="password" id="txtLoginPw" placeholder="비밀번호" />
<button id="buttonLogin" class="inactive">로그인</button>

css 스타일 준비

// 비활성화 되었을 경우에는 투명도를 설정하여 비활성화 요소로 보이도록 변경
.inactive {
     opatity: .3;
}

JS

const textLoginId = document.getElementById('txtLoginId');
const textLoginPw = document.getElementById('txtLoginPw');
const buttonLogin = document.getElementById('buttonLogin');

// 1. className
buttonLogin.className = (textLoginId.value !== '' && textLoginPw.value !== '' ) ? "" : "inactive";

// 2. classList
buttonLogin.classList.add("inactive");
buttonLogin.classList.remove("inactive");
buttonLogin.classList.toggle("inactive");