javascript 隱藏/顯示指定的區(qū)域附HTML元素【legend】用法
更新時(shí)間:2010年03月05日 16:47:10 作者:
今日閑來(lái)無(wú)事就寫寫JS,用來(lái)顯示/隱藏制定的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ù)可以指定需要操作的事件對(duì)象,比如一個(gè)ID為inputshowData的Input按鈕,
el2參數(shù)可以指定需要隱藏的一個(gè)區(qū)域,可以是TABLE,div等。
<input name="inputshowData" id="inputshowData" value="隱藏" type="button" onclick="expandOther('datadiv','inputshowData')" />
id為datadiv 數(shù)據(jù)顯示層區(qū)域
id為inputshowData 操作按鈕
HTML示例CODE:
<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)很簡(jiǎn)單呢?
個(gè)人覺得。
不過(guò)這個(gè)層有滾動(dòng)條,主要是基于style屬性overflow:auto;和有指定的寬度和高度。
如果不直接指定寬度,那以瀏覽器的寬度為標(biāo)準(zhǔn)顯示滾動(dòng)條,
如果沒有指定高度,則不會(huì)顯示向下的滾動(dòng)條,似乎是這樣。俺對(duì)美工不咋的。今天權(quán)當(dāng)記錄在這里,以后可以回頭看看當(dāng)時(shí)自己是怎么個(gè)理解和寫的代碼。
代碼
復(fù)制代碼 代碼如下:
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ù)可以指定需要操作的事件對(duì)象,比如一個(gè)ID為inputshowData的Input按鈕,
el2參數(shù)可以指定需要隱藏的一個(gè)區(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)很簡(jiǎn)單呢?
個(gè)人覺得。
不過(guò)這個(gè)層有滾動(dòng)條,主要是基于style屬性overflow:auto;和有指定的寬度和高度。
如果不直接指定寬度,那以瀏覽器的寬度為標(biāo)準(zhǔn)顯示滾動(dòng)條,
如果沒有指定高度,則不會(huì)顯示向下的滾動(dòng)條,似乎是這樣。俺對(duì)美工不咋的。今天權(quán)當(dāng)記錄在這里,以后可以回頭看看當(dāng)時(shí)自己是怎么個(gè)理解和寫的代碼。
相關(guān)文章
Javascript將字符串日期格式化為yyyy-mm-dd的方法
日期格式化相信對(duì)于大家來(lái)說(shuō)再熟悉不過(guò),最近工作中自己利用Javascript就寫了一個(gè),現(xiàn)在將實(shí)現(xiàn)的代碼分享給大家,希望對(duì)有需要的朋友們能有所幫助,感興趣的朋友們下面來(lái)一起看看吧。2016-10-10JavaScript實(shí)現(xiàn)星星等級(jí)評(píng)價(jià)功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)星星等級(jí)評(píng)價(jià)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03js數(shù)字計(jì)算 誤差問(wèn)題的快速解決方法
下面小編就為大家?guī)?lái)一篇js數(shù)字計(jì)算 誤差問(wèn)題的快速解決方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02JS注冊(cè)/移除事件處理程序(ExtJS應(yīng)用程序設(shè)計(jì)實(shí)戰(zhàn))
最常做的事情就是注冊(cè)事件處理程序,因?yàn)樵贓xtJS的世界里,幾乎完全由時(shí)間組成,下面是處理程序案例,感興趣的朋友可以參考下哈,希望可以幫助到你2013-05-05JS幾個(gè)常用的函數(shù)和對(duì)象定義與用法示例
這篇文章主要介紹了JS幾個(gè)常用的函數(shù)和對(duì)象定義與用法,涉及JavaScript日期時(shí)間、數(shù)值計(jì)算及變量判斷等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01微信小程序scroll-view實(shí)現(xiàn)上拉加載數(shù)據(jù)重復(fù)的解決方法
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)上拉加載數(shù)據(jù)重復(fù)的解決方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08微信小程序使用map組件實(shí)現(xiàn)解析經(jīng)緯度功能示例
這篇文章主要介紹了微信小程序使用map組件實(shí)現(xiàn)解析經(jīng)緯度功能,涉及微信小程序map組件結(jié)合高德地圖進(jìn)行經(jīng)緯度獲取相關(guān)操作技巧,需要的朋友可以參考下2019-01-01