JavaScript를 사용하여 CSS 속성 변경

JavaScript로 CSS 속성을 변경하려면 대상 요소를 선택한 뒤 해당 요소의 style 객체에서 속성을 설정합니다. 서로 관련된 여러 스타일을 적용할 때는 CSS 클래스를 추가하면 됩니다. 요소 하나에는 ID나 CSS 선택자를 사용하고, 일치하는 모든 요소를 변경하려면 클래스 기반 컬렉션을 사용하세요. 브라우저는 document 객체를 제공하며 jQuery는 선택 사항입니다.

element.style로 CSS 속성 하나 변경

인라인 스타일 하나를 설정할 때는 element.style을 사용합니다. 하이픈이 들어간 CSS 속성 이름은 JavaScript에서 camelCase로 표기합니다. 예를 들어 border-color는 borderColor가 됩니다. 다음의 간단한 픽스처는 JavaScript 환경에서 요소 선택과 속성 할당 패턴을 실행할 수 있게 합니다. 웹페이지에서는 document가 브라우저의 실제 문서 객체입니다.

다음 예제를 실행해 보세요.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const input = { style: {} };
const document = {
  getElementById(id) {
    return id === "email" ? input : null;
  }
};

const element = document.getElementById("email");
if (element) {
  element.style.borderColor = "red";
}

스타일을 할당하면 요소의 인라인 스타일이 변경됩니다. 스타일시트 규칙을 편집하거나 다른 스타일을 제거하는 것은 아닙니다. 브라우저 코드에서는 이에 해당하는 선택 방법이 document.getElementById("email")입니다. 반환된 값을 확인한 뒤 속성을 읽거나 변경하세요.

CSS 클래스로 여러 스타일 적용

하나의 상태에 서로 연관된 선언이 여러 개 필요하다면 클래스를 사용하는 편이 관리하기 쉽습니다. 스타일시트에 클래스를 정의한 다음 classList.add()로 적용하고 classList.remove()로 해제하세요. 예를 들어 입력 오류 클래스 하나로 테두리와 텍스트를 모두 빨간색으로 설정할 수 있습니다. classList를 사용하면 요소의 다른 클래스는 그대로 유지됩니다.

element.className = "input-error"를 할당해도 클래스 속성은 변경되지만, 기존 클래스 문자열 전체를 대체합니다. 새 문자열에 포함하지 않은 레이아웃이나 유효성 검사 클래스는 사라집니다. 클래스를 개별적으로 추가하거나 제거할 때는 classList를 사용하고, 모든 클래스를 의도적으로 바꾸려면 className을 사용하세요.

getElementsByClassName으로 클래스에 해당하는 요소 선택

document.getElementsByClassName("input-blue-border")는 일치하는 요소의 실시간 HTMLCollection을 반환하며, 배열을 반환하지 않습니다. 일치하는 요소가 문서에 들어오거나 문서에서 빠지면 컬렉션도 갱신됩니다. 현재 일치하는 모든 요소를 변경하려면 for...of 루프로 컬렉션을 순회하며 각 요소의 스타일이나 클래스 목록을 수정하세요. 배열 메서드가 필요하다면 먼저 Array.from(...)으로 변환합니다.

이 메서드는 요소에서 호출해 그 요소의 자손 중 일치하는 항목을 찾을 수도 있습니다. 인수에는 앞에 점을 붙이지 않은 클래스 이름을 전달합니다. .input-blue-border처럼 앞에 점이 붙은 표기는 querySelector() 같은 CSS 선택자 API에서만 사용하세요.

getElementById 또는 querySelector로 요소 하나 선택

document.getElementById("email")은 ID로 요소를 찾고, 일치하는 요소 또는 null을 반환합니다. 문서에서 ID는 고유해야 합니다. 중복 ID는 잘못된 마크업이므로 어느 요소가 반환될지 기대해서는 안 됩니다.

document.querySelector(".input-blue-border")는 CSS 선택자를 받아 첫 번째로 일치하는 요소를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. ID(#email), 클래스(.input-blue-border), 태그(input)로 요소를 선택할 수 있습니다. 여러 요소와 일치할 수 있는 선택자를 전달해도 querySelector()는 첫 번째 일치 항목만 반환합니다. 스타일이나 클래스를 변경하기 전에 값이 null인지 확인하세요.

선택자를 고르고 누락되거나 여러 요소가 일치하는 경우 처리

변경할 대상과 요소 수에 따라 선택자를 고르세요. 고유 ID를 가진 요소 하나에는 getElementById를 사용하고, CSS 선택자가 더 편리하며 첫 번째 일치 항목만 필요하다면 querySelector()를 사용합니다. 같은 클래스가 있는 요소를 모두 변경하려면 getElementsByClassName을 사용하세요. 스타일 선언 하나에는 element.style을 설정하고, 여러 선언이 필요한 이름 있는 상태에는 클래스를 전환합니다.

요소가 아직 문서에 없거나 ID 또는 클래스 이름에 오타가 있거나 마크업이 아직 로드되지 않았다면 선택에 실패할 수 있습니다. 관련 마크업이 준비된 뒤 선택하거나, style 또는 classList에 접근하기 전에 반환값을 확인하세요. 브라우저에서는 다음과 같이 작성할 수 있습니다: const element = document.querySelector(".notice"); if (element) element.classList.add("is-visible");. 클래스 컬렉션에서 하나만 변경하려면 대상을 명시적으로 선택하고, 모두 변경하려면 컬렉션을 순회하세요.

요약

먼저 의도한 요소를 선택하세요. 인라인 스타일 선언 하나를 설정하려면 element.style을 사용하고, 기존 클래스를 유지하면서 여러 스타일을 적용하려면 classList를 사용합니다. getElementById는 ID로 요소를 찾고, querySelector()는 CSS 선택자와 일치하는 첫 번째 요소를 반환하며, getElementsByClassName은 클래스와 일치하는 모든 요소를 변경할 때 사용할 수 있는 실시간 컬렉션을 반환합니다. 요소 하나를 선택한 결과는 사용 전에 확인하고, 여러 요소를 변경해야 한다면 컬렉션을 순회하세요.