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

티스토리 뷰

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();

소스코드

<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>