DOM
CSS 스타일 사용하기

비고

인라인 스타일 읽기 및 변경

인라인 스타일

style 속성을 읽거나 편집하여 HTML 요소의 인라인 CSS 스타일을 조작 할 수 있습니다.

다음 요소를 가정합니다.

<div id="element_id" style="color:blue;width:200px;">abc</div>

이 자바 스크립트를 적용한 경우 :

var element = document.getElementById('element_id');

// read the color
console.log(element.style.color); // blue

//Set the color to red
element.style.color = 'red';

//To remove a property, set it to null
element.style.width = null;
element.style.height = null;

그러나 width: 200px; 외부 CSS 스타일 시트에 설정되어 있으면 element.style.width = null 이 적용되지 않습니다. 이 경우, 스타일을 재설정, 당신은 설정해야 initial : element.style.width = 'initial' .

스타일 시트에서 스타일 읽기 및 변경하기

element.style 은 요소 속성으로 인라인으로 설정된 CSS 속성 만 읽습니다. 그러나 스타일은 종종 외부 스타일 시트에 설정됩니다. 요소의 실제 스타일은 window.getComputedStyle(element) 하여 액세스 할 수 있습니다. 이 함수는 모든 스타일의 실제 계산 된 값을 포함하는 객체를 반환합니다.

독서 및 인라인 스타일 변경 예제와 유사하지만 스타일은 스타일 시트에 있습니다.

<div id="element_id">abc</div>
<style type="text/css">
    #element_id {
        color:blue;
        width:200px;
    }
</style>

자바 스크립트 :

var element = document.getElementById('element_id');

// read the color
console.log(element.style.color); // '' -- empty string
console.log(window.getComputedStyle(element).color); // rgb(0, 0, 255)

// read the width, reset it, then read it again
console.log(window.getComputedStyle(element).width); // 200px
element.style.width = 'initial';
console.log(window.getComputedStyle(element).width); // 885px (for example)