JS點擊顯示隱藏密碼

思路：獲取元素，判斷點擊，如果DIV顯示就隱藏，如果DIV隱藏就顯示出來。

1 if(DIV是顯示的){
2     div.style.display='none';
3 }
4 else{
5     div.style.display='block';    
6 }

 

代碼：

style:

1 <style>
2 #text{display:block;width:300px;cursor:pointer;height:20px;border:solid 1px #CCC;}
3 #menu{display:none;width:300px;height:100px;border:solid 1px #CCC;}
4 </style>

 

js:

<script type="text/javascript">
window.onload=function(){
    var wenzi=document.getElementById('text');
    var div=document.getElementById('menu');
    wenzi.onfocus=function(){
            if(div.style.display=='block'){ // == 判斷div.display是否為顯示
                    div.style.display='none'; //= 賦值也可了解成改變
                }
                else{
                    div.style.display='block';
                }
        }
};
</script>

 

html

<span id="text">點擊顯示菜單，再點擊隱藏菜單</span>
<div id="menu">這是文字哦。</div>