[java] Thymeleaf에서 특정 요소의 가시성(visibility)을 동적으로 변경하는 방법은 무엇인가요?

29 Nov 2023

java

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf Visibility Example</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div th:id="myDiv" style="display: none;">
        This is a hidden div.
    </div>

    <button onclick="toggleVisibility()">Toggle Visibility</button>

    <script th:inline="javascript">
        function toggleVisibility() {
            var div = document.getElementById('myDiv');
            if (div.style.display === 'none') {
                div.style.display = 'block';
            } else {
                div.style.display = 'none';
            }
        }
    </script>
</body>
</html>

위의 코드에서는 Thymeleaf의 th:id를 이용하여 숨길 요소의 ID를 설정합니다. 초기에는 style="display: none;" 속성을 사용하여 해당 요소를 처음부터 숨길 수 있습니다. 버튼을 클릭할 때마다 toggleVisibility() 함수가 호출되어 요소의 가시성을 변경합니다.

이 예시 코드에서는 jQuery를 사용하여 요소의 ID를 선택하고 가시성을 변경하는 부분을 단순화하였습니다. jQuery를 사용하지 않고 순수 JavaScript만을 사용하여 요소의 가시성을 변경할 수도 있습니다.

참고 문서: