[jQuery]display 여부에 따른 show, hide 설정하기.

청정코딩샘물 2019. 2. 22. 00:09

728x90

◎ display의 상태를 확인하여 보여줄지 감출지 선택할 수 있습니다.

1
2
3
4
5
6
if($("#dis").css("display") == "none"){
    $("#dis").show();
} else {
    $("#dis").hide();
}
 
Colored by Color Scripter
cs

◎ 일반 자바스크립트로 할 경우

1
obj.style.display = (obj.style.display = none) ? "" : "";
cs

◎ 예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <title>테스트</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
 
        function dis(){
            if($('#dis').css('display') == 'none'){
            $('#dis').show();
        }else{
            $('#dis').hide();
        }
        }
            
    
        
    </script>
</head>
<body>
    <img id='dis' src="error.jpg" width="500" height="300" display='none'>
<button id='show' onclick="dis()">show</button>
</body>
</html>
Colored by Color Scripter
cs
※이미지는 변경해서 테스트 하세요!

See the Pen bzyLBo by 유호준 (@ToxicNuke) on CodePen.

저작자표시 (새창열림)