2016年7月21日 星期四

HTML內顯示和隱藏指定的元件

在HTML內,也許會有一些要先隱藏後顯示的按鈕、輸入框或選項存在,這時就可以藉由使用者點擊按鈕、或是達成某項條件而改變;這邊來寫一個按鈕,點擊後可以改變隱藏的輸入框為顯示狀態。
--------------------------------------------------------------------------------------------------------
HTML處的寫法:
<a href = "javascript:showPasswordInput()">重置密碼</a>

<tr id = "passwordRow" style = "display:none">
    <input type = "text" name = "password" id = "passwordID" value = "">
</tr>
--------------------------------------------------------------------------------------------------------
JavaScript處的寫法:
<script type="text/javascript">

function showPasswordInput()
{
    var passwordRow = document.getElementById( 'passwordRow' );

    passwordRow.style.display = "";
}

</script>
--------------------------------------------------------------------------------------------------------
一開始<tr>那行內的密碼輸入框是隱藏的,接著點擊按鈕後在Function內重新設定style.display成顯示狀態。

style.display有很多屬性,比較常用的有:
style.display = "none"
style.display = "block"
style.display = "inline"......等

這邊是很無厘頭的寫style.display = ""。

沒有留言:

張貼留言