DOM을 깨우치다 정리 (6)

6549 단어 DOMDOM

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");
CodeWars 코딩 문제 2021/05/27 - Turn String Input into Hash
201228. Intro

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage