HTML DOM을 이용한 스타일 및 CSS 변경

HTML 스타일 변경하기

자바스크립트에서 HTML 엘리먼트의 스타일을 동적으로 변경할 수 있다. 문법은 다음과 같다.

document.getElementById(id).style.property="새 스타일";

다음 예제를 보자.

document.getElementById('image1').style.visibility="hidden";
document.getElementById("p1").style.color="green";

HTML CSS 클래스 변경하기

동적으로 엘리먼트의 class를 설정하면 엘리먼트에 적용된 스타일을 극적으로 변경할 수 있다.

자바스크립트에서는 HTML 엘리먼트의 className 프로퍼티를 동적으로 변경할 수 있다. 문법은 다음과 같다.

document.getElementById(id).className="새 CSS";

다음 예제를 보자.

document.getElementById('image1').className="new-css-1, new-css-2";
document.getElementById("p1").className="new-css-3, new-css-4";

스타일시트 활성화와 비활성화

자바스크립트에서는 <link>와 <style> 엘리먼트의 disabled 프로퍼티를 이용해 스타일시트를 활성화하거나 비활성화할 수 있다. disabled 프로퍼티가 true이면 <link>나 <style> 엘리먼트와 관련된 스타일시트가 비활성화되어 브라우저에서 무시하게 된다. 다음 예제를 보자.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
    <link rel="stylesheet" type="text/css" href="ss1.css" id="ss1">
    <link rel="alternate stylesheet" type="text/css" href="ss2.css" id="ss2">
    <style id="ss3" title="Sans Serif">
        body { font-family: sans-serif; }
    </style>
</head>
<body>

<script type="text/javascript">
    document.getElementById('ss1').disabled = true;
    document.getElementById('ss3').disabled = true;
</script>

</body>
</html>

관련 수업

← 이전홈다음 →