javascript 隱藏/顯示指定的區(qū)域附HTML元素【legend】用法
更新時(shí)間：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ù)可以指定需要操作的事件對(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)很簡單呢？
個(gè)人覺得。
不過這個(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)很簡單呢？
個(gè)人覺得。
不過這個(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)文章
這篇文章主要為大家介紹了Web?Woker常見使用問題及方案解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
詳解JS事件循環(huán)及宏任務(wù)微任務(wù)的原理
在js中，我們一般將所有的任務(wù)都分成兩類，一種是同步任務(wù)，另外一種是異步任務(wù)。而在異步任務(wù)中，又有著更加細(xì)致的分類，那就是微任務(wù)和宏任務(wù)。本文將詳細(xì)講解這二者的原理與使用，需要的可以參考一下2022-05-05
javascript + jquery實(shí)現(xiàn)定時(shí)修改文章標(biāo)題
用javascript+jquery寫的一個(gè)定時(shí)器，定時(shí)修改文章標(biāo)題,需要的朋友可以參考下2014-03-03
electron獲取位置坐標(biāo)信息的方法小結(jié)
這篇文章給大家詳細(xì)介紹了electron 如何獲取位置坐標(biāo)信息,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
神級(jí)程序員JavaScript300行代碼搞定漢字轉(zhuǎn)拼音
這篇文章主要介紹了神級(jí)程序員JavaScript300行代碼搞定漢字轉(zhuǎn)拼音,需要的朋友可以參考下2017-05-05
微信小程序開發(fā)越來越多樣化,各種豐富的設(shè)計(jì)及體驗(yàn),自定義tabBar也經(jīng)常使用,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何自定義tabBar的相關(guān)資料,需要的朋友可以參考下2021-08-08
JS特權(quán)方法定義作用以及與公有方法的區(qū)別
在構(gòu)造函數(shù)內(nèi)部通過this關(guān)鍵字定義的的方法為特權(quán)方法它的作用為在構(gòu)造函數(shù)外面公開訪問(僅限于實(shí)例化的對(duì)象)，而且還能夠訪問私有成員和方法，感興趣的你可以參考下哈2013-03-03
JavaScript中setInterval()用法舉例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中setInterval()用法的相關(guān)資料,setInterval()方法可按照指定的周期(以毫秒計(jì))來調(diào)用函數(shù)或計(jì)算表達(dá)式,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
微信小程序?qū)崿F(xiàn)聯(lián)動(dòng)菜單
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)聯(lián)動(dòng)菜單，左右側(cè)菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08