프로그래밍 공부 일기

2020년 11월 15일
닷 설치로 JavaScript를 학습하는 동안 문득, 「CSS의 스타일은 어떻게 취득하는 것인가? 』라고 신경이 쓰였습니다.
자신적으로는, 다소 어려웠기 때문에 향후 실수하지 않도록 기록해 갑니다.

얻고 싶은 것

CSS 파일에 기술한 background 프로퍼티의 값을 취득하고 싶습니다.

index.html

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

style.css

.box {
    width: 100px;
    height: 100px;
    background-color: rgb(204,204,204);
}

완성 코드

우선 최종적으로 취득할 수 있었던 코드가 이하가 됩니다.

script.js

'use strict';
let $target = document.getElementById('target');
console.log(window.getComputedStyle($target)['background']);

완성 코드 해설

1.id 속성이 'target'인 요소를 가져옵니다.

2. window.getComputedStyle($target)[background] 에서 얻은 요소의 CSSStyleDeclarationオブジェクトのbackgroundプロパティの値를 반환합니다.

손잡이 부분

도트 설치에서 box 클래스의 배경색을 변경할 때,

script.js

$target.style.background = 'pink';

라고 기술하고 있었으므로, 배경색을 취득할 때도,

script.js

console.log($target.style.background);

나갈 수 있을까 생각했는데, 콘솔 보면 아무것도 얻을 수 없었습니다.

위의 글을 쓰면,

index.html

  <div class="box" id="target" style='background: pink;'></div>

그리고 要素にstyle属性を直接指定する 또는,

script.js

$target.style.background = 'pink';
console.log($target.style.background);

그리고 jsファイルで先に背景色を変える指定を行い、 얻어야 한다는 것을 알았습니다.

참고 자료

CSSStyleDeclaration

【JavaScript】 요소에 지정된 CSS 스타일을 얻는 방법