[JavaScript] 스타일 시트 조작하기

 

 

JavaScript 로 스타일 시트 조작하기

HTML을 조작하는 방법 외에 DOM을 이용하면 스타일 시트를 조작할 수 있다. DOM 으로 스타일 시트를 조작하는 방법에는 인라인 스타일로 액세스하는 방법과 외부의 스타일 시트를 적용하는 방법이 있다.

 

 

 인라인 스타일로 액세스하기 - style 프로퍼티

인라인 스타일이란 개개의 노드에 대해 설정된 스타일이다. 

<div style="color:Red">붉은 문자입니다.</div>

 

인라인 스타일로 액세스하려면 style 프로퍼티를 사용한다.

elem.style.prop [= value]
// elem : 요소 객체, prop : 스타일 프로퍼티, value: 설정값

 

예시 코드) 마우스 포인터를 올려놓은 타이밍에 배경색 변경하기

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('btn');

    // 마우스 포인터가 올라간 타이밍에 배경색을 변환
    button.addEventListener('mouseover', function() {
        this.style.backgroundColor = "yellow";
    }, false);

    // 마우스 포인터가 벗어난 타이밍에 배경색을 되돌림
    button.addEventListener('mouseout', function() {
        this.style.backgroundColor = 'red';
    }, false);

}, false);

 

 

 외부 스타일 시트 적용하기 - className 프로퍼티

스타일 정의가 스크립트가 혼재되어 버리기 때문에 디자인의 변경 등의 어려움이 있을 수 있으므로 스타일의 정의는 스타일 시트에 하고 스크립트 측에서는 스타일과 관련된 부분만을 바꿀 수 있도록 하는 것이 바람직하다. 외부 스타일 시트로 정의된 스타일(=스타일 클래스)에 액세스하는 것은 className 프로퍼티의 역할이다. HTML 에서 대응하는 것은 class 속성이다.

elem.className [= class];
// elem : 요소 객체, class : 스타일 클래스

 

예시) 

/** css 스타일 시트트
.box {background-color: bisque;}
.highlight {background-color: brown;}
.red {padding: 10px;}
 */

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('btn');

    // 마우스 포인터가 올라간 타이밍에 배경색을 변환
    button.addEventListener('mouseover', function() {
        this.className = 'box';
    }, false);

    // 마우스 포인터가 벗어난 타이밍에 배경색을 되돌림
    button.addEventListener('mouseout', function() {
        this.className = 'highlight red';
    }, false);

}, false);

 

예시) 스타일 클래스를 붙이거나 떼어내기

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('btn');

    button.addEventListener('click', function() {
        this.className = (this.className === 'red' ? '' : 'red');
    }, false);

}, false);

 

 

 스타일 클래스를 더 간단하게 조작하기 - classList 프로퍼티

classList 프로퍼티를 이용하여 clas 속성의 값을 DOMTokenList 객체로 취득할수 있다.

 

classList 프로퍼티의 주요 맴버

맴버	개요
length	리스트의 길이
item(index)	인덱스 번호의 클래스 취득
contains(class)	지정한 클래스가 포함되어 있는지 확인
add(class)	리스트에 클래스 추가
remove(class)	리스트로부터 클래스 삭제
toggle(class)	클래스의 on/off 전환

 

예시) toggle

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('btn');

    button.addEventListener('click', function() {
        // this.className = (this.className === 'red' ? '' : 'red');
        this.classList.toggle('red');
    }, false);

}, false);