backgroundColor 속성은 요소의 배경색을 설정하거나 반환하는 데 사용됩니다. 표준 이름, rgb(), rgba(), hsl() 또는 hsla()로 값을 지정할 수 있습니다.
구문
다음은 −
의 구문입니다.backgroundColor 속성 설정 -
object.style.backgroundColor = "color|transparent
값
위의 속성 값은 다음과 같이 설명됩니다 -
| Sr.No | 값 및 설명 |
|---|---|
| 1 | 색상 배경색을 지정합니다. |
| 2 | 투명 배경색을 투명으로 설정합니다. 즉, 기본 콘텐츠를 볼 수 있습니다. 기본값입니다. |
예시
backgroundColor 속성의 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
background-color: rgba(10,122,102,0.1);
}
</style>
<script>
function changeBackColor(){
document.getElementById("DIV1").style.backgroundColor="rgba(1,200,55,0.5)";
document.getElementById("Sample").innerHTML="The background color is now changed";
}
</script>
</head>
<body>
<div id="DIV1">Duis tincidunt urna a interdum consectetur. Pellentesque nec pretium ante.
In nisl magna, vestibulum non vulputate vel, feugiat ac tellus. Sed tincidunt id leo at mollis.
Praesent pellentesque purus vitae scelerisque gravida. Pellentesque pulvinar scelerisque sem,
at euismod sapien tristique et.</div>
<p>Change the above div background color by clicking the below button</p>
<button onclick="changeBackColor()">CHANGE COLOR</button>
<p id="Sample"></p>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE CLIP 버튼을 클릭하면 -