javascript顯示和隱藏div的方法

這篇文章給大家分享的是有關javascript顯示和隱藏div的方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

javascript顯示隱藏div的方法：首先新建文件，并創建button按鈕；然后創建隱藏的div，并給div設置隱藏的樣式；最后為button按鈕添加一個點擊后隱藏事件。

javascript顯示隱藏div的方法：

1、打開html開發軟件，新建一個html文件。如圖：

2、在html文件上創建一個button按鈕，然后給這個按鈕設置一個id，在案例中把按鈕的id設置為show。如圖：

代碼：

<input type="button" id="show" value="顯示隱藏div" />

3、然后創建一個隱藏的div，把需要隱藏的內容寫到這個div上，然后給這個div設置一個id，在案例中設置案例的id為hide。如圖：

代碼：

<div id="hide">我是隱藏的div</div>

4、給div設置隱藏的樣式。在<title>標簽后面為id為hide設置樣式display:none,這個樣id為hide的div就會被隱藏掉了。如圖：

樣式代碼：

<style>
#hide{display: none;padding-top: 15px;}
</style>

5、為button按鈕添加一個點擊后隱藏事件。點擊button按鈕后，把隱藏的div的display修改為block，這樣點擊后div就會顯示了。如圖：

事件代碼：

<script type="text/javascript">
 window.onload = function(){
document.getElementById("show").onclick = function(){
 document.getElementById("hide").style.display = "block";
}
 }
</script>

感謝各位的閱讀！關于“javascript顯示和隱藏div的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！