使用JavaScript顯示或隱藏html對象

為了滿足情境需要，在html頁面載入時，需要將html對象隱藏，當調用html對象時，再將該對象顯示出來。JavaScript怎樣實現這一項功能呢？下面，以div為例講解一下。

整理思路：

1. 我們在首頁面上定義一個button作為觸發器，使用button的onclick事件

2. 定義一個“id=show” 的隱藏的div，關鍵是把屬性值display設為none

3. 編寫JavaScript指令碼函數，功能是實現div可以show出來

 

把握關鍵點：

根據上面的思路，關鍵點有兩個，一個是div的屬性值display的設定，另一個是JavaScript的function

 

分析所需參數：

     e: 註冊事件

     isShow: bool類型值

     _id: div標籤ID

需要編寫指令碼function ：

   function setPosition(e,isShow,_id){
        var oDiv=document.getElementById(_id);
        if(isShow){
             var isIe=navigator.appName.indexOf("Microsoft")!=-1?true:false;
             oDiv.style.top=isIe?event.clientY+"px":e.pageY+"px";
             var iLeft=isIe?event.clientX-100:e.pageX;
             oDiv.style.left=iLeft+"px";
             if(isShow) oDiv.style.display="";
       }
       else
        oDiv.style.display="none";
    }

     簡單吧？使用JavaScript顯示或隱藏html對象，就這麼輕鬆的實現了！其他的html對象也是使用同樣的方法。不再贅述。