이전까지 배운 요소를 취득, 변경, 삭제는 모두 HTML 문서의 요소에 접근하는 방식이었습니다. 하지만 웹은 기본적으로 html, css, js로 구성되어있습니다. html에 접근하는 방법은 알아봤으니 이번에는 css에 접근하는 방법을 알아보겠습니다.

style 프로퍼티

css에 접근하는 첫 번째 방법은 style 프로퍼티입니다. style 프로퍼티는 스타일을 인라인 스타일로 삽입합니다.

요소.style.속성 = "속성 값"

요소를 지정하고, style 프로퍼티를 지정한 다음, 속성과 속성값을 넣기만 하면 됩니다. 종종 <input>의 readonly처럼 속성이름만 있는 속성이 있는데요. 그럴경우 요소.style.readonly처럼 적어주면됩니다.

style 프로퍼티 사용 주의점

style 프로퍼티에서 속성을 지정할 때 사용하는 이름이, 스타일 시트에서 이용되는 속성 이름과 다른 경우가 있습니다. 대표적으로 스타일 시트의 background-color는 자바스크립트에서 backgroundColor처럼 쓰입니다. 이처럼 두 가지 규칙을 가지고 스타일 속성 명이 변화합니다.

• 하이픈-은 제거하고 붙여쓴다.
• camelCase를 따라서 속성 이름을 쓴다.

---

하지만 `style 프로퍼티`를 이용한 방식은 인라인 스타일이라는 한계 때문에 문서구조를 복잡하게 만든다는 단점이 있습니다. 그래서 이 역시도

className 프로퍼티

className 프로퍼티는 외부 스타일 시트를 적용하는 방식을 따르는 방식입니다. 기본적인 사용은 다음과 같습니다.

요소.className = '클래스명';

그런데, 이것만 봐서는 감이 잘 잡히지 않죠? 예제 코드를 하나 가져왔습니다.

<p id = 'elem'>울랄라</p>

/*css 문서*/
.color-change {
  color: red;
}

document.addEventListener('DOMContentLoaded', function() {
  let elem = document.getElementById('elem');
  
  elem.addEventListener('click', function() {
    this.className = 'color-change';
  }, false);
}, false);

방식을 보시면, html 요소를 취득합니다. 그리고 분리된 css 문서에 class 셀렉터로 만들어진 스타일을 만들어둡니다. 그리고 js에서 이 스타일 시트에서 접근하여 스타일을 조작합니다.

이렇게 하니 물론 파일 구조 자체는 복잡해지지만, 코드의 분리가 깔끔하게 이루어졌음을 알 수 있습니다.