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

[DOM_Style] JS - 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"

 


[속성값]

 

0.0 ~ 1.0 사이의 숫자

※ 숫자가 커질수록 불투명해짐 (기본값: 1.0)

 

initial

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

 

inherit

부모요소의 속성값 상속.

 


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

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