[HTML & CSS][DOM] CSSStyleDeclaration 알아보기

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration

참고 블로그 (학습 내용)

[2022.05.19] DOM - 노드 CSS 스타일(CSSStyleDeclaration), 클래스 추가/삭제 하기(className, classList)

 

CSSStyleDeclaration 쉽게 말해, 노드 css 스타일!

HTMLElement 객체의 style 프로퍼티에 의해서 참조된다.

 

아래와 같이 자바스크립트에서 DOM을 조작하여 노드에 style을 넣을 수 있다.

const menu = document.querySelector('.menu-list');
menu.style.backgroundColor = 'skyblue';
menu.style.width = '200px';

아래와 같은 형태도 가능하다.

menu.style['backgroundColor'] = 'orange';
menu.style['width'] = '200px';

<div class="menu-container">
  <ul class="menu-list">
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
  </ul>
</div>
<div class="contents-container">
  <p class="title">텍스트1</p>
  <p class="content">텍스트2</p>
</div>

먼저, ul태그에 스타일을 넣기.

.style이라는 키워드를 사용해 css의 스타일 속성을 부여할 수 있다.

 

 

개인 실습

 

<h1 class="title">PIXI STUDY</h1>

	<script src="./cssStyleDeclaration.js" defer></script>

const title = document.querySelector('.title');
title.style.backgroundColor = 'skyblue';
title.style.width = '200px'; //js에서 직접적인 style 제어 방법(1) .으로 속성 접근
title.style['width'] = '200px';//js에서 직접적인 style 제어 방법(2) 배열명으로 접근
title.style['font-size'] = '35px';

태그에 style 찍은 것이 바로

cssStyleDeclaration 이다.

숫자 인덱스 키에 적혀있는 값들은 개발자가 자바스크립트로 적용한 속성들

개발자가 지정해준 속성들이 순서대로 배열정보에 들어가 있다!

title.style.cssText

title.style.length

출력 3

title.style.getPropertyValue('width') 

출력 '200px'

title.style.getPropertyPriority('width') === 'important'

출력 false

title.style.item(0)

title.style.setProperty('background-color', 'pink') //값변경

글쎄... 위의 코드는 구글링 해보니까 크롬에서는 잘 먹지 않았다. 

title.style['fontSize'] = '20px' <- 이거는 잘 먹었는데,

여기서 속성값 찾아서 배열에 박는 형식이 직관적인 듯

menu.style.removeProperty('width') //속성 제거

스타일 관련 여러 메소드 사용이나 스타일 정보를 확인
1. CSSStyleDeclaration.cssText : 적용한 css를 텍스트로 확인
2. CSSStyleDeclaration.length : 적용한 css의 개수(길이)가 반환
3. CSSStyleDeclaration.getPropertyPriority('priority') : ()안에 넣은 스타일의 중요도를 확인할 때 사용한다. 반환 값은 Boolean 타입
4. CSSStyleDeclaration.getPropertyValue(key) : 스타일 키 값을 넣으면 해당하는 value값
5. CSSStyleDeclaration.item(index) : 적용된 스타일의 index를 넣으면 해당하는 key값이 반환
6. CSSStyleDeclaration.removeProperty('style name') : 파라미터로 스타일의 이름(key)를 넣으면 해당 스타일이 제거
7. CSSStyleDeclaration.setProperty('적용할 스타일 이름', '적용할 값', '옵션( important/undefined/"" ') : 스타일을 수정할 때 사용. 현재 적용되어 있지 않는 스타일을 작성하면 추가. 옵션 값으로 중요도를 설정할 수 있으나 생략 가능

 

클래스 추가/제거/토글하기

태그 변수에 직접적으로 쓸 수 있는 속성들

title.classList

title.className

title.classList.contains

classList 메서드

Element.classList.add : 클래스를 추가할 수 있다.
Element.classList.remove : 클래스를 제거할 수 있다.
Element.classList.toggle(String [, force]) : 클래스가 있는 경우 삭제하고 없는 경우 추가한다. 두번째 인자를 넣는 경우 두번째 인자가 true일 때만 값을 추가하고 false면 제거한다.
Element.classList.item(Number) : DOMTokenList의 인덱스를 사용하여 클래스 값을 반환한다.
Element.classList.contains(String) : 해당 클래스가 존재하는지 확인하고 true또는 false로 반환한다.
Element.classList.replace(old class, new class) : 클래스를 변경(재설정)한다.

 

가령 css 에 아래와 같은 스타일이 있다고 치자.

.title {
	font-weight: bold;
}
.pink-border {
	border: 2px solid rgb(255, 0, 200);
  }
.small-title {
	margin: 15px;
}

 

title.classList.remove('pink-border')