목차
- backgroundColor 예제 - body 요소 배경색 설정
- backgroundColor 정의
- backgroundColor 구문
- backgroundColor 예제 - h1 요소의 배경색 설정
- backgroundColor 예제 - h1 요소의 배경색 반환
- backgroundColor 예제 - body 요소 배경색 반환
backgroundColor 예제 - body 요소 배경색 설정
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.body.style.backgroundColor = "Tomato";
}
</script>
결과보기
backgroundColor 정의
요소의 배경색 설정/반환.
1.
2.
모든 브라우저 지원.
backgroundColor 구문
배경색 반환
object.style.backgroundColor
배경색 설정
object.style.backgroundColor = "color|transparent|initial|inherit"
[속성값]
CSS background-color 속성 구문 참고
[반환값]
색상을 나타내는 문자열.
backgroundColor 예제 - h1 요소의 배경색 설정
<style>
#hz {background-color: coral; color: white;}
</style>
<button onclick="homzzang()">클릭</button>
<h1 id="hz">홈짱닷컴 Homzzang.com</h1>
<script>
function homzzang() {
document.getElementById("hz").style.backgroundColor = "lightblue";
}
</script>
결과보기
backgroundColor 예제 - h1 요소의 배경색 반환
<button onclick="homzzang()">클릭</button>
<h1 id="hz" style="background-color: coral; color: white;">홈짱닷컴 Homzzang.com</h1>
<script>
function homzzang() {
alert(document.getElementById("hz").style.backgroundColor);
}
</script>
backgroundColor 예제 - body 요소 배경색 반환
<body style="background-color:yellow;">
<h1>홈짱닷컴 Homzzang.com</h1>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
alert(document.body.style.backgroundColor);
}
</script>
</body>
결과보기
