[Thymeleaf] 속성을 이용해 Element 넘기기

Thymeleaf에서 태그에 속성값을 입력하고 함수로 Element 넘기는 방법에 대해 간략히 알아보겠습니다.

 

1. 속성 선언

<img th:src="@{/images/test.png}" alt="..." th:data-url="${imgUrl}" onclick="zoomIn(this)"/>

• th:data-url 이라는 속성에 변수 imgUrl 값을 맵핑하고 zoomIn 함수에 this을 파라미터로 넘깁니다.

2. 함수 구현

function zoomIn(element){
  var imgUrl = element.getAttribute('data-url');
  
  // 모달창을 여는 로직
  var modal = document.getElementById("imageModal");
  var modalImg = document.getElementById("modalImage");

  modal.style.display = "flex";
  modalImg.src = imgUrl;
}

• getAttribute 를 이용하여 속성값을 가져온 후 알맞게 사용합니다.

감사합니다.