CSS 의 z-index 값을 javascript zIndex 로 동적으로 변경시키기

CSS 속성중에서 z-index 라는 값이 있죠....

<style>

img {

    position: absolute;

    left: 0px;

    top: 0px;

    z-index: -1;

}

</style>

<h1>This is a heading</h1>

<img src="w3css.gif" width="100" height="140">

예를 들어, 위와 같이 코딩했을 경우,<h1> 엘리먼트가 <img> 엘리먼트보다 위에 표시되게 됩니다.

<h1> 엘리먼트가 <img>엘리먼트보다 먼저 코딩되어 있기 때문에, 정상적이라면 나중에 코딩된 <img> 엘리먼트가 <h1> 위에 올라가는게 맞지만, z-index 속성을 -1 로 주었기 때문에, 이런 상황이 생기게 됩니다.

이번 포스팅에서 강조하려고 하는 것은, CSS 로 설정된 z-index 값을 javascript 를 이용하여 동적으로 변경시키는 것입니다.

이때, 흔히 하기 쉬운 실수가 바로 아래와 같이 코딩하는 것입니다.

<style>

img {

    z-index: -1;

}

</style>

<img src = "menu.gif" style="z-index:-1" id = "target_img">

<script language = "javascript">

    document.getElementById("target_img").style.z-index = 1000;

</script>

하지만, 이렇게 하면 z-index 가 제대로 작동하지 않고 ERROR 가 발생하게 됩니다.

보통, style 속성을 변경하고자 할때 아래와 같이 코딩하는게 맞죠....

document.getElementById("target_img").style.src = "menu_on.gif";

그러니까, 당연하게도.... z-index 속성을 변경할때는 style.z-index 를 사용하면 되겠다고 생각하는 거죠....

하지만, 여기서 알아두어야 할 것은, CSS 의 z-index 와 javascript 의 z-index 는 조금 다르다는 것입니다.

css 에서 z-index 를 설정할때는 z-index 가 맞습니다. 하지만, javascript 에서 z-index 를 설정할때는 z-index 가 아니라 zIndex 입니다 !!!

발견하셨죠? javascript 에서는  - 표시가  없습니다.... 그래서, javascript 에서 CSS 의 z-index 속성을 변경하려면 아래와 같이 코딩해야 합니다. 

<script language = "javascript">

    document.getElementById("target_img").style.zIndex = 1000;

</script>

이렇게 하면, 해당 엘리먼트에는 아래와 같이 적용된다고 보면 됩니다.

<img src = "menu.gif" style="z-index:-1" id = "target_img" style="z-index:1000">

별거 아니지만, 가끔 혼동되서... 시간낭비할 때가 많아서 포스팅으로 남겨둡니다