[JavaScript]JavaScript에서 배경색 변경하는 방법
JavaScript에서 배경색 변경하는 방법
JavaScript에서 특정 이벤트가 발생하면 HTML 요소의 배경색(Background Color)을 변경해야 하는 상황이 존재할 수 있습니다.
이번 포스팅은 HTML 요소의 배경색을 변경할 수 있는 몇 가지 방법을 소개합니다.
웹 페이지의 배경색 변경하는 방법
버튼을 클릭했을 때, 웹 페이지의 배경색을 변경하는 방법입니다.
1. HTML 요소에 click 이벤트 리스너를 추가합니다.
2. document.body.style.backgroundColor 프로퍼티에 배경색을 설정합니다.
아래는 HTML 마크업입니다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<button id="button-yellow">배경색 yellow로 변경</button>
<button id="button-red">배경색 red로 변경</button>
<button id="button-blue">배경색 blue로 변경</button>
<script src="script.js"></script>
</body>
</html>아래는 JavaScript 파일입니다.
버튼을 클릭하면 웹 페이지의 배경색이 변경됩니다.
const btnYellow = document.getElementById("button-yellow");
const btnRed = document.getElementById("button-red");
const btnBlue = document.getElementById("button-blue");
btnYellow.addEventListener("click", (e) => {
document.body.style.backgroundColor = "yellow";
});
btnRed.addEventListener("click", (e) => {
document.body.style.backgroundColor = "red";
});
btnBlue.addEventListener("click", (e) => {
document.body.style.backgroundColor = "blue";
});클릭한 HTML 요소의 배경색 변경하는 방법
웹 페이지의 배경색이 아닌 클릭한 HTML 요소의 배경색을 변경하는 방법입니다.
1. HTML 요소에 click 이벤트 리스너를 추가합니다.
2. event 객체를 사용하기 위해 첫 번째 매개변수를 설정합니다.
3. event 객체의 target.style.backgroundColor 프로퍼티에 배경색을 설정합니다.
아래는 HTML 마크업입니다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<button id="button-yellow">버튼 배경색 yellow로 변경</button>
<button id="button-red">버튼 배경색 red로 변경</button>
<button id="button-blue">버튼 배경색 blue로 변경</button>
<script src="script.js"></script>
</body>
</html>아래는 JavaScript 파일입니다.
버튼을 클릭하면 버튼의 배경색이 변경됩니다.
const btnYellow = document.getElementById("button-yellow");
const btnRed = document.getElementById("button-red");
const btnBlue = document.getElementById("button-blue");
btnYellow.addEventListener("click", (e) => {
e.target.style.backgroundColor = "yellow";
});
btnRed.addEventListener("click", (e) => {
e.target.style.backgroundColor = "red";
});
btnBlue.addEventListener("click", (e) => {
e.target.style.backgroundColor = "blue";
});특정 HTML 요소의 배경색 변경하는 방법
버튼을 클릭했을 때, 다른 HTML 요소의 배경색을 변경하는 방법입니다.
1. button 요소에 click 이벤트 리스너를 추가합니다.
2. getElementById(), querySelector() 메서드처럼 HTML 요소를 가져오는 메서드를 사용하여 특정 HTML 요소를 가져옵니다.
3. 특정 HTML 요소의 배경색을 변경합니다.
다음 예제는 button 요소에서 클릭이 발생하면 id 속성이 divTest인 div 태그의 배경색을 변경합니다.
아래는 HTML 마크업입니다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
#divTest {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<button id="button-yellow">div 요소 배경색 yellow로 변경</button>
<button id="button-red">div 요소 배경색 red로 변경</button>
<button id="button-blue">div 요소 배경색 blue로 변경</button>
<div id="divTest"></div>
<script src="script.js"></script>
</body>
</html>아래는 JavaScript 파일입니다.
const btnYellow = document.getElementById("button-yellow");
const btnRed = document.getElementById("button-red");
const btnBlue = document.getElementById("button-blue");
const divTest = document.getElementById("divTest");
btnYellow.addEventListener("click", (e) => {
divTest.style.backgroundColor = "yellow";
});
btnRed.addEventListener("click", (e) => {
divTest.style.backgroundColor = "red";
});
btnBlue.addEventListener("click", (e) => {
divTest.style.backgroundColor = "blue";
});