자바스크립트로 클래스 제어하기

클래스 이름만 추가·제거하는 방법으로 스타일 변경

1. document.querySelector()문으로 #wrap 요소를 찾아서 변수 wrap에 저장
2. wrap을 불러 다시 querySelector으로 자식 요소인 ex1-1을 찾아 변수 box에 저장
3. addEventListener()문을 활용하여 wrap 을 클릭하면 자식 요소의 배경색 변경

※ 하짐만 이렇게 인라인 형태로 삽입된 스타일 구문은 우선순위가 매우 높아서 기존 css파일에 적용된 스타일 우선순위에 문제가 발생할 수도 있다.

 

스타을 속성값을 직접 변경하지않고 클래스명을 추가해서 스타일 제어

1. #wrap2.on #ex1-2로 CSS선택자를 지정해서 #wrap2 요소에 클래스 on이 추가되면
2. #ex1-2 의 배경색이 변경확인하면 
3. 개발자 도구를 열여서 확인하면 부모 요소인 #wrap2에 클래스 on이 추가되면서 CSS변경

 

클릭 이벤트로 스타일 제어

1. #wrap3 요소를 클릭하는 순간 내부에 let 변수로 isOn을 생성
2. #wrap3 요소를 클릭할 때마다 #wrap3요소 안에 클래스 on이 있는지 없는지 확인
   • contains()는 특정 클래스가 선택 요소 안에 있으면 true 없으면 false 를 반환

※하지만 한번 클릭하면 클래스에 on이 들어있어서 그다음 클릭 부터는 계속 true 반환

 

 

1. 조건문을 활용해 클래스 on 유뮤에 따라 분기 처리
2. if 문 안쪽이 true 이면 on 이라는 클래스 제거
3. false 이면 on이라는 클래스 추가

※ 삼항 연산자를 사용하여 조건문 축약하기

(isOn1) ? wrap4.classList.remove("on") : wrap4.classList.add("on");

첫번째 () 는 조건식으로 이 조건식이 true이면  ? 뒤에 구문이 실행되고 false 이면 : 뒤에 구문이 실행