JavaScript에서 배경색 변경
Ammar Ali
2021년10월18일
이 튜토리얼에서는 JavaScript의 backgroundColor 속성을 사용하여 배경색을 변경하는 방법에 대해 설명합니다.
JavaScript의 backgroundColor 속성을 사용하여 배경색 변경
JavaScript의 backgroundColor 속성을 사용하여 배경색을 변경할 수 있습니다. 이 속성을 사용하려면 배경색을 변경하고 싶은 요소를 가져와야 하며, backgroundColor 속성을 사용하여 배경색을 설정할 수 있습니다.
예를 들어 HTML을 사용하여 페이지를 만들고 backgroundColor 속성을 사용하여 본문의 배경색을 녹색으로 변경해 보겠습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
document.body.style.backgroundColor = 'green';
</script>
</body>
</html>
클래스의 id나 이름으로 요소를 가져올 수도 있습니다. id를 사용하여 요소를 가져오려면 getElementById() 함수를 사용할 수 있습니다. 해당 클래스를 사용하여 요소를 가져오려면 getElementsByClassName() 함수를 사용할 수 있습니다.
예를 들어, id로 요소를 가져오고 backgroundColor 속성을 사용하여 배경색을 변경해 보겠습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p id='myID'>
Hello Wold
</p>
<script type="text/javascript">
document.getElementById('myID').style.backgroundColor = 'green';
</script>
</body>
</html>
위의 코드는 id가 myID인 요소의 배경색만 변경하고 전체 본문 섹션은 변경하지 않습니다. 또한 색상 이름을 사용하여 변경하는 대신 다른 색상의 색상 코드를 사용하여 요소의 배경 색상을 변경합니다.
버튼을 사용하여 텍스트의 배경색을 변경하는 코드를 작성해 보겠습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button onClick="Mycolor()">Change Color</button>
<div id="myID">Hello World</div>
<script type='text/javascript'>
function Mycolor() {
var element = document.getElementById("myID");
element.style.backgroundColor='#900';
}
</script>
</body>
</html>
이 코드에는 버튼과 텍스트가 표시됩니다. 버튼을 누르면 텍스트의 배경색이 주어진 색상에 따라 변경됩니다.
작가: Ammar Ali
