JavaScript에서 요소의 배경색을 다루려면 DOM의 style 객체가 제공하는 backgroundColor 속성을 사용하면 됩니다. 이 속성은 요소에 새로운 배경색을 설정할 수 있을 뿐만 아니라, 현재 지정된 배경색 값을 읽어와서 반환하는 기능도 수행합니다.
backgroundColor 속성의 기본 문법
배경색을 설정할 때는 값을 대입하고, 반환(조회)할 때는 속성값을 그대로 참조하면 됩니다.
// 배경색 설정 요소.style.backgroundColor = "색상값"; // 배경색 반환 const 색상 = 요소.style.backgroundColor;
예제: 버튼 클릭으로 배경색 변경하기
다음 코드를 실행하고 버튼을 클릭하면, display() 함수가 실행되어 페이지 전체(body)의 배경색이 파란색으로 변경됩니다.
<!DOCTYPE html>
<html>
<body>
<button onclick="display()">클릭하여 배경색 설정</button>
<script>
function display() {
document.body.style.backgroundColor = "blue";
}
</script>
</body>
</html>현재 배경색 값 반환하기
설정된 인라인 스타일의 배경색을 반환하려면 아래와 같이 작성합니다.
const currentColor = document.body.style.backgroundColor; console.log(currentColor); // "blue" 출력
만약 CSS 파일이나 스타일 태그를 통해 적용된 최종 계산된(computed) 배경색까지 확인하고 싶다면, getComputedStyle() 메서드를 함께 사용하는 것이 좋습니다.
const bgColor = window.getComputedStyle(document.body).backgroundColor; console.log(bgColor); // 예: "rgb(0, 0, 255)"
정리
- element.style.backgroundColor: 인라인 스타일의 배경색을 설정하거나 반환
- window.getComputedStyle(element).backgroundColor: 최종 적용된 계산된 배경색 반환
- 색상값은 이름(blue), HEX(#0000ff), RGB(rgb(0, 0, 255)) 등 다양한 형식으로 지정할 수 있습니다.