DOM을 깨우치다 정리 (6)

dongwon·2021년 4월 27일

DOM

DOM을 깨우치다

목록 보기

7/9

6장. Element 노드 인라인 스타일

6-1. style attribute(element 인라인 CSS 속성) 개요

모든 HTML element는 해당 element에 한정된 인라인 CSS 속성을 넣을 수 있다.

<div style = "background-color: red">

6-2. 개별 인라인 CSS 속성 가져오기, 설정, 제거

element 노드 개체에 존재하는 스타일을 설정, 가져오고 제거할 수 있다.

<body>
  <div></div>
</body>;

var divStyle = document.querySelector("div").style;

// 설정
divStyle.backgroundColor = "red";

// 가져오기
console.log(divStyle.backgroundColor);

// 제거하기
divStyle.backgroundColor = "";

6-3. 모든 인라인 CSS 속성 가져오기, 설정, 제거

CSSStyleDeclaration 개체의 cssText와 getAttribute(), setAttribute(), removeAttribute() 를 이용하면 모든 인라인 CSS를 가져오고, 설정, 제거할 수 있다.

<body>
  <dib></div>
</body>;

var div = document.querySelector("div");
var divStyle = div.style;

divStyle.cssText = "bacground-color: red";
console.log(divStyle.cssText);
divStyle.cssText = "";

div.setAttribute("style", "background-color: red");
console.log(div.getAttribute("style"));
div.removeAttribute("style");

6-5. class 및 id attribute를 사용하여 element의 CSS 속성을 적용 및 제거하기

스타일 규칙은 class 및 id attribute를 사용하여 element에 추가하거나 제거할 수 있다.
setAttribute()와 classList.add(), removeAttribute()와 classList.remove() 사용

div.setAttribute("id", "bar");
div.classList.add("foo");

div.removeAttribute("id");
div.classList.remove("foo");

dongwon

데이원컴퍼니 프론트엔드 개발자입니다.

이전 포스트

DOM을 깨우치다 정리 (5)

다음 포스트