javaScript

[자바 스크립트] html화면에 일정구간 안보이게 / 보이게 하기

홍로그 2017. 3. 3. 19:07


제일 많이 쓰는 3가지 방법입니당

CASE1:자바스크립트로 해결하기 
document.getElementById("showHide").style.display ='none';
document.getElementById("showHide").style.display ='block';
CASE2:제이쿼리로 해결하기
$("#showHide").css("display" ,"block");
$("#showHide").css("display" ,"none");
CASE3:제이쿼리로 해결하기(제일 간단함)
$("#showHide").show();
$("#showHide").hide();
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <!-- 제이쿼리 사용시 필수 -->



소스코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 
 </HEAD>
 <style>
     #showHide { width:60%; height:60%; background-color:#FFCC00; margin:10px auto; }
 </style>
 
<script>
    function show(){
        document.getElementById("showHide").style.display ='block';
    }
    function hide(){
        document.getElementById("showHide").style.display ='none';
    }
    function showHide(){
        if(document.getElementById("showHide").style.display =='none'){
            document.getElementById("showHide").style.display ='block';
        }
        else{
            document.getElementById("showHide").style.display ='none';
        }
    }
</script>
<body>
     <center>
        <button onclick=show();>보이기</button>
        <button onclick=hide();>숨기기</button>
        <button onclick=showHide();>숨기기/보이기</button>
    </center>
    <div id="showHide" align="middle">
        <center>구역</center>
    </div>
 
 </BODY>
</HTML>
cs




결과



클릭하면~