jQuery 없이 순수 JavaScript로 요소에 여러 스타일을 한 번에 적용하는 방법

바닐라 JavaScript만으로 요소에 여러 스타일을 추가하다 보면 다소 번거롭게 느껴질 때가 있습니다. 가장 널리 쓰이는 방식은 대상 요소를 먼저 선택한 뒤, 스타일 속성을 하나씩 차례로 지정하는 것입니다.

// 대상 요소 선택 (여기서는 class 속성 사용)
const buttonAddToCart = document.querySelector(".button-add-to-cart")

// 스타일 속성을 하나씩 추가
buttonAddToCart.style.backgroundColor = "#82b97e"
buttonAddToCart.style.color = "#fff"
buttonAddToCart.style.padding = "24px"
buttonAddToCart.style.textTransform = "uppercase"
buttonAddToCart.style.letterSpacing = "0.1em"

동작은 하지만 코드 중복이 많고 반복적이며, 재사용하기도 어렵습니다. 마치 이름 있는 함수 대신 익명 함수를 남발하는 것과 비슷한 느낌이죠.

대신 스타일 객체(style object)를 활용하면 훨씬 깔끔하게 처리할 수 있습니다.

// 스타일 객체 생성
const buttonPrimary = {
  backgroundColor: "#82b97e",
  color: "#fff",
  padding: "24px",
  textTransform: "uppercase",
  letterSpacing: "0.1em",
}

// buttonPrimary 스타일 객체를 버튼 요소에 일괄 적용
Object.assign(buttonAddToCart.style, buttonPrimary)

이 방식은 코드가 간결해질 뿐만 아니라, 만들어 둔 buttonPrimary 스타일 객체를 기본(primary) 버튼 스타일이 필요한 모든 버튼 요소에 재사용할 수 있어 반복 코드를 크게 줄일 수 있습니다.

참고로 CSS 속성은 카멜 케이스(camelCase)로 작성해야 합니다. 예를 들어 background-color는 backgroundColor, letter-spacing은 letterSpacing으로 표기합니다.

잠깐, CSS가 있는데 굳이 JavaScript로 스타일을 지정해야 할까?

솔직히 말씀드리면, CSS in JS(또는 JSS)는 CSS·JS 커뮤니티에서 늘 뜨거운 논쟁거리입니다. 저는 어느 한쪽 편에 서지 않습니다. 두 접근 방식 모두 장점이 있으며, 무엇보다 상황과 맥락(context)에 따라 판단하시길 권합니다.

다만 JavaScript로 스타일링하면 특히 유용한 경우가 분명히 있습니다. 예를 들어 특정 요소의 스타일을 정의한 CSS 파일에 직접 접근할 수 없는 상황이라면 어떨까요? CMS나 외부 위젯처럼 스타일시트 수정이 불가능한 환경에서, JavaScript로 기존 스타일을 덮어쓸 수 있다는 사실 하나만으로도 클라이언트의 문제를 즉시 해결할 수 있습니다. 접근 권한이 없다면 그날 안에 문제를 해결하지 못하고 끝날 수도 있겠죠.

이런 시나리오에서야말로 JavaScript의 유연함이 진가를 발휘합니다.