Categories
JavaScript

자바스크립트로 스타일 속성값을 읽고 쓰기

자바스크립트를 이용해서 HTML 엘리먼트에 스타일을 적용하는 방법을 알아보자.

다음과 같이 id 가 example 인 p 엘리먼트가 있다고 하자.

<p id=”example”>자바스크립트 예제</p>

엘리먼트를 선택한다.

var exam = document.getElementById(“example”);

폰트의 색상을 노란색으로 바꾼다.

exam.style.color = “yellow”;

폰트의 크기를 2배로 키운다.

exam.style.fontSize = “2em”;

스타일 속성의 이름이 font-size 가 아니라 fontSize 라는 점에 유의한다.

HTML 엘리먼트 스타일의 속성값을 읽는 방법을 알아보자.

다음과 같은 p 엘리먼트가 있다고 하자.

<p id=”example” style=”color:yellow; font-size:2em;”>자바스크립트 예제</p>

엘리먼트를 선택한다.

var exam = document.getElementById(“example”);

스타일 속성값을 읽어 alert() 메소드로 출력한다.

alert(exam.style.color);    // yellow 를 출력한다.

alert(exam.style.fontSize);    // 2em 을 출력한다.

font-weight 속성의 값도 출력해 보자.

alert(exam.style.fontWeight);    // 아무 것도 출력하지 않는다.

font-weight 속성값이 출력되지 않는 이유는 해당 속성이 명시적으로 지정되지 않았기 때문이다.

엘리먼트의 모든 스타일 속성값을 읽으려면 window.getComputedSytle() 메소드를 사용한다.

엘리먼트의 모든 스타일 정보를 읽어 변수에 저장한다.

var cStyle = window.getComputedStyle(exam);

스타일 정보에서 font-weight 속성값을 읽어 변수에 저장한다.

var pValue = cStyle.getPropertyValue(“font-weight”);

alert() 메소드로 속성값을 출력한다.

alert(pValue);    // 700 을 출력한다.

Leave a Reply

Your email address will not be published. Required fields are marked *