css 스타일 주기.(element.style.속성명),(element.classList.add/remove/toggle)

const a = document.querySelector('#abc');

a.style.backgroundColor = '#000000';
a.style.속성명 = '속성값';

• 카멜 표기법을 이용하여 속성을 나타내고, 속성 값의 경우 ' ' 혹은 " " 로 감싸서 작성한다.
• style 프로퍼티를 이용하면 태그에 직접적으로 값이 적용된다.
• setAttribute와 비슷한 효과.
• 스타일 우선순위가 바뀐다거나, 같은 스타일을 여러가지 태그에 적용해야 할 때는 불필요한 코드가 많아짐.
• 태그의 class를 변경하는 방식이 좀 더 권장 됨.

​

className

• 특정 태그에 스타일을 줄 때 class의 name을 전부 바꿔버림

<!-- 예를들어 -->
<div class = "a" >
  <div class = "b"></div>
</div>

• b 라는 클래스를 가진 div가 존재할 때 다음과 같은 스크립트를 작성하면

const a = document.querySelector('.a');

a.children[0].className = 'c';

• HTML 실행 시 class 'a'가'c'로 변경된다.

<div class = "a" >
  <div class = "c"></div>
</div>

• 그런데, 기존의 class 를 놔두고 새로운 class를 추가하고 싶다면 어떻게 해야할까?
• 바로 classList 를 이용하는 것이다.

​

classList

• 클래스를 다루는 프로퍼티
• add : 클래스를 추가
• remove : 클래스를 삭제
• toggle : 클래스가 있으면 삭제하고, 없으면 추가

 

a.children[0].classList.add('c'); /* 결과 : class = 'a c' */
a.children[0].classList.remove('c'); /* 결과 : class = 'a' */
/* 여러 개의 class 추가 삭제 시  */
a.children[0].classList.add('c','d','e'); /* 컴마를 통해 추가 */ /* 결과 : class = 'a c d e' */
a.children[0].classList.remove('c','d','e'); /* 컴마를 통해 추가 */ /* 결과 : class = 'a' */

a.children[0].classList.toggle('c'); /* c 라는 클래스가 있으면 삭제, 없으면 추가 */
a.children[0].classList.toggle('c',true); /* 두 번째에 Boolean 값을 받아 true 이면 add */
a.children[0].classList.toggle('c',false); /* 두 번째에 Boolean 값을 받아 false 이면 remove */