[JavaScript] 자바스크립트에서 스타일 확인하기

153_자바스크립트에서 스타일 확인하기

[적용]

• 요소에 적용한 스타일을 확인하고 싶을 때

---

[문법]

속성	의미	반환
getComputedStyle. 속성	스타일 값 가져오기	문자열

---

[내용]

getComputedStyle()을 사용해 스타일 정보를 가져올 수 있다.각 스타일 설정에 따라 최종적으로 계산된 값을 가져온다.

 

HTML                                                                                                                                                              index.html

<div id="box" class="red"></div>

CSS                                                                                                                                                                      style.css

#box {
  width: 100px;
  height: 100px;
}

.red {
  background-color: #ff2bc2;
}

JavaScript                                                                                                                                                          main.js

const box = document.querySelector('#box');

console.log(getComputedStyle(box).width);
// width 값 확인. 100px

console.log(getComputedStyle(box).backgroundColor);
// background-color 값 확인. rgb(255, 43, 194)

 

'요소.style.속성'을 통해 확인할 수 있는 값은 요소의 인라인 스타일에 한정된다.

또한, CSS에서 설정된 스타일 값은 '요소.style.속성'을 통해서는 확인이 불가능하다.

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김