원시 JavaScript를 사용하여 요소에 여러 스타일을 추가하는 방법(jQuery 없음!)

원시 바닐라 JavaScript로 요소에 여러 스타일을 추가하는 것은 약간 투박하게 느껴질 수 있습니다. 일반 JavaScript로 요소의 스타일을 지정하는 가장 일반적인 방법은 대상 요소를 가져온 다음 한 번에 하나의 스타일을 추가하는 것입니다.

// Grab target element (here via its class attribute)
const buttonAddToCart = document.querySelector(".button-add-to-cart")

// Add style properties, one at a time
buttonAddToCart.style.backgroundColor = "#82b97e"
buttonAddToCart.style.color = "#fff"
buttonAddToCart.style.padding = "24px"
buttonAddToCart.style.textTransform = "uppercase"
buttonAddToCart.style.letterSpacing = "0.1em"

작동하지만 중복되고 반복이 너무 많으며 코드를 재사용할 수 없습니다. 명명된 함수 대신 익명의 함수를 사용하는 것과 같습니다.

위의 작업 대신 스타일 개체를 사용할 수 있습니다.

// Create a style object
const buttonPrimary = {
  backgroundColor: "#82b97e",
  color: "#fff",
  padding: "24px",
  textTransform: "uppercase",
  letterSpacing: "0.1em",
}

// Assign buttonPrimary (style object) to button element
Object.assign(buttonAddToCart.style, buttonPrimary)

이 접근 방식이 더 깔끔할 뿐만 아니라 이 buttonPrimary를 적용할 수도 있습니다. 기본 버튼 스타일이 필요한 모든 버튼 요소에 스타일 개체를 추가하고 반복적인 코드 작성을 방지합니다.

여러 요소에 스타일 개체를 적용하는 코드 예제

잠깐만, 왜 JavaScript를 사용하여 HTML 스타일을 지정하시겠습니까? CSS 대신 요소?

죄송합니다. 저는 미끼를 사용하지 않습니다. JS의 CSS 또는 JSS는 CSS 및 JS 장면에서 뜨거운 주제이지만 이 싸움에는 개가 없습니다. 나는 두 가지 접근 방식을 모두 좋아합니다. 컨텍스트를 사용하는 것이 좋습니다. 귀하가 내리는 결정의 원동력이 됩니다.

그러나 JavaScript로 스타일을 지정하는 것이 유용할 수 있는 경우를 예로 들겠습니다. 요소의 스타일을 정의하는 CSS 스타일시트에 직접 액세스할 수 없는 상황에 있다고 가정해 보겠습니다. 이 상황에서 자바스크립트로 기존 스타일에 스타일을 지정하거나 덮어쓸 수 있다는 것은 클라이언트의 문제를 빨리 해결하느냐, 아니면 당일 해결하지 못하느냐의 차이일 수 있습니다.

이러한 유형의 시나리오에서 JavaScript의 다양성이 빛을 발합니다.