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

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

See the Pen js추가제거로 스타일변경 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

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

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

 

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

See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen.

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

 

클릭 이벤트로 스타일 제어

See the Pen 6-5 isOn으로 제어 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

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

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

 

See the Pen 6-5 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

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

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

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

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