快捷導(dǎo)航

javascript 隱藏/顯示指定的區(qū)域附HTML元素【legend】用法

更新時間：2010年03月05日 16:47:10 作者：

今日閑來無事就寫寫JS，用來顯示/隱藏制定的DIV區(qū)域。

javascript code:
代碼

 
function expandOther(el, el2) { 
whichEl = document.getElementById(el) 
button = document.getElementById(el2) 
if (whichEl.style.display == 'none') { 
whichEl.style.display = ''; 
button.value = "隱藏"; 
} 
else { 
whichEl.style.display = 'none'; 
button.value = "顯示"; 
} 

expandOther(e1,el2)，
e1參數(shù)可以指定需要操作的事件對象，比如一個ID為inputshowData的Input按鈕，
el2參數(shù)可以指定需要隱藏的一個區(qū)域，可以是TABLE，div等。
<input name="inputshowData" id="inputshowData" value="隱藏" type="button" onclick="expandOther('datadiv','inputshowData')" />
id為datadiv 數(shù)據(jù)顯示層區(qū)域
id為inputshowData 操作按鈕
HTML示例CODE：

復(fù)制代碼代碼如下:

 
<fieldset> 
<legend> 
<input name="inputshowData" id="inputshowData" value="隱藏" type="button" onclick="expandOther('datadiv','inputshowData')" /></legend> 
<div id="datadiv" style="width: 400PX; height: 100px; overflow: auto;"> 
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None"> 
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> 
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> 
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> 
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> 
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> 
<EditRowStyle BackColor="#999999" /> 
<AlternatingRowStyle BackColor="White" ForeColor="#284775" /> 
</asp:GridView> 
</div> 
</fieldset> 

是不是發(fā)現(xiàn)很簡單呢？
個人覺得。
不過這個層有滾動條，主要是基于style屬性overflow:auto;和有指定的寬度和高度。
如果不直接指定寬度，那以瀏覽器的寬度為標(biāo)準(zhǔn)顯示滾動條，
如果沒有指定高度，則不會顯示向下的滾動條，似乎是這樣。俺對美工不咋的。今天權(quán)當(dāng)記錄在這里，以后可以回頭看看當(dāng)時自己是怎么個理解和寫的代碼。

您可能感興趣的文章: