• Q&A
  • 회원가입
  • 로그인

[DOM_Style] JS - backgroundColor 속성 ★ - 배경색 설정/반환. (= backgroundColor속성 = 백그라운드컬러속성)

목차

  1. backgroundColor 예제 - body 요소 배경색 설정
  2. backgroundColor 정의
  3. backgroundColor 구문
  4. backgroundColor 예제 - h1 요소의 배경색 설정
  5. backgroundColor 예제 - h1 요소의 배경색 반환
  6. 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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012