javascript 隱藏/顯示指定的地區附HTML元素【legend】用法

來源:互聯網
上載者:User

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參數可以指定需要操作的事件對象,比如一個ID為inputshowData的Input按鈕,
el2參數可以指定需要隱藏的一個地區,可以是TABLE,div等。
<input name="inputshowData" id="inputshowData" value="隱藏" type="button" onclick="expandOther('datadiv','inputshowData')" />
id為datadiv 資料顯示層地區
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>

是不是發現很簡單呢?
個人覺得。
不過這個層有捲軸,主要是基於style屬性overflow:auto;和有指定的寬度和高度。
如果不直接指定寬度,那以瀏覽器的寬度為標準顯示捲軸,
如果沒有指定高度,則不會顯示向下的捲軸,似乎是這樣。俺對美工不咋的。今天權當記錄在這裡,以後可以回頭看看當時自己是怎麼個理解和寫的代碼。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.