JavaScript - z-index 값 동적으로 변경 & 특정 문자를 포함한 클래스 찾기

JavaScript - z-index 값 동적으로 변경 & 특정 문자를 포함한 클래스 찾기

 

구현하는 프로젝트에서 여러개에 모달창을 띄워서 정보를 나타내는데 여러개를 동시에 띄우면 css의 적용된 z-index값이 그대로 적용되므로 내가 클릭한 모달창을 제일 앞으로 띄우기 위해서는 클릭이벤트가 발생할때 마다 동적으로 값을 변경해줄 필요가 있다. 그 과정에서 z-index값 변경시 주의점과 변경해줄 모달들만 찾기 위해 사용한 특정 문자를 포함한 클래스 찾는 방법을 정리한다.

 

z-index값 변경

보통 css의 style 속성 값을 변경할때 아래와 같이 많이 사용한다.

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

이와 같이 생각해서 document.getElementById("target_img").style.z-index 라고 쓰면 에러가 난다.

 

javascript에서 style값으로 z-index를 변경할시에는 zIndex라고 써야한다.

<script language = "javascript">
    document.getElementById("target_img").style.zIndex = 10;
</script>

 

특정 문자를 포함한 클래스 찾기

 

dom 트리 아래에 특정 모달만 찾기 위해 사용한 방법이다. 먼저 내가 찾고 싶은 모달에만 중복이 가능한 class name을 적어준다. 만약 class="modal"이라 했을때 다음과 같이 찾아낼 수 있다.

 $("[class*='modal']").get();

이런식으로 해당 객체들을 배열로 가져올 수 있고, 그 이후에는 상황에 맞게 핸들링하면 된다.