자바스크립트를 이용해서 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 을 출력한다.