728x90
반응형
style="display:none;"으로 설정했는데 해당 영역의 높이만큼 자리차지는 하게 해주고 싶으면 어떻게 해야될까?
Visibility를 활용하는 방법:
<div style="visibility:hidden;">내용</div>visibility:hidden; 속성은 요소를 보이지 않게 하지만, 공간은 그대로 유지합니다.
style="visibility:hidden;" 을 해제하는 jquery 코드
$('#myElement').css('visibility', 'visible');<!DOCTYPE html>
<html>
<head>
<title>Visibility Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myElement" style="visibility:hidden;">이 영역은 처음에 보이지 않습니다.</div>
<button id="showButton">Show Element</button>
<script>
$(document).ready(function(){
$('#showButton').click(function(){
$('#myElement').css('visibility', 'visible');
});
});
</script>
</body>
</html>
728x90
반응형
'Front > CSS' 카테고리의 다른 글
| [CSS] rem단위 (0) | 2024.08.06 |
|---|---|
| [CSS] table header 상단에 고정시키기 (0) | 2024.06.20 |
| [CSS] border-collapse (0) | 2024.06.19 |
| [CSS][Bootstrap] multiselect 위치 조정하기 (0) | 2024.05.11 |
| [CSS] flex-wrap 줄바꿈 상태에서 가운데 정렬하기 (0) | 2024.02.29 |