[DOM_Style] JS - opacity 속성 - 요소의 불투명도 설정/반환 (= opacity속성 = 오패서티속성)

1. opacity 예제 - 불투명도 30%로 설정
2. opacity 정의
3. opacity 구문

opacity 예제 - 불투명도 30%로 설정

 

<style> 

#box {

  position: absolute;

  width: 300px;

  height: 150px;

  background-color: blue;

  border: 1px solid black;

}

#hz {

  position: relative;

  top: 130px;

  left: 30px;

  width: 300px;

  height: 150px;

  background-color: red;

  border: 1px solid black;

}

</style>

<button onclick="homzzang()">클릭</button>

<div id="hz"><h1>홈짱닷컴 Homzzang.com</h1></div>

<div id="box"></div>

<script>

function homzzang() {

  document.getElementById("box").style.opacity = "0.3";

}

</script>

 

결과보기

opacity 정의

 

요소의 불투명도 설정/반환. 

 

---

 

1.

• 기본값: 1 (※ 완전 불투명)
• 반환값: 요소의 불투명도를 나타내는 문자열.
• CSS속성: opacity
• CSS버전: CSS3

2.

모든 브라우저 지원. 

 

opacity 구문

반환

object.style.opacity

 

설정

object.style.opacity = "number|initial|inherit"

 

---

[속성값]

 

number

0.0 ~ 1.0 사이의 숫자. (숫자 클수록 더 불투명) (기본값: 1.0)

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소의 속성값 상속.