DOM 스타일링

el.classList

스타일이 필요할 때 el.classList를 사용한다.

www.jsfiddle.net/1m33vjcv/4/embed/

위 예제에서 toggle 메서도는 두번째 인수로 전달되는 부울 값에 따라 지정된 클래스를 추가하거나 제거한다.

명시적 스타일

el.style 속성을 사용해 요소에 동적인 스타일 정보를 읽거나 설정할 수 있다. 또는 cssText를 사용해 스타일을 한번에 지정할 수 있다.

www.jsfiddle.net/9n6Lp7b5/1/embed/

window.getComputedStyle

window.getComputedStyle는 상속된(계산된) 스타일을 반환한다.

/**
 * Getting computed styles
 */
var el = document.querySelector( "h1" ),
    css = window.getComputedStyle( el, null );
console.log( css.getPropertyValue( "font-family" ) );

의사요소(pseudo-element) 스타일의 수정이 필요할 경우, 아래와 같이 수정할 수 있다.

www.jsfiddle.net/69gzexb8/embed/