js中style.display=""無效的解決方法
更新時間：2014年10月30日 11:30:49 投稿：shichen2014
這篇文章主要介紹了js中style.display=""無效的解決方法,是js程序設計中非常常見的問題,需要的朋友可以參考下
本文實例講述了js中style.display=""無效的解決方法。分享給大家供大家參考。具體解決方法如下：
一、問題描述：
在js中我們有時想動態(tài)的控制一個div顯示或隱藏或更多的操作，但如果我們style.display=""可能導致沒有效果。
看下面一段代碼：
復制代碼 代碼如下:
<style>
#name
{
display:none;
}
</style>
</head>
<body>
<div id="name" >
My name is smile.
</div>
</body>
</html>
<script>
window.onload=function(){
document.getElementById('name').style.display="";
alert("test");
}
</script>
#name
{
display:none;
}
</style>
</head>
<body>
<div id="name" >
My name is smile.
</div>
</body>
</html>
<script>
window.onload=function(){
document.getElementById('name').style.display="";
alert("test");
}
</script>
css定義了id為name的div為隱藏，而我們在頁面加載完成之后用js控制該id顯示出來，這樣寫有錯么？
木有錯？可是為什么界面上還是空白呢？
二、解決方法：
記得還有一個用法是xxx.style.display="block" 那我們試試吧，
嗚呼，竟然顯示了?。?！
那我們查看一下style.display=""和style.display="block"用法有什么不同吧。
其實，這兩個的最大區(qū)別是block是塊顯示的，所以會換行，那么既然就這么點區(qū)別，為什么在本例子中一個可以顯示，一個不行呢?困擾。
好吧，這個問題先放開，我們先看現在這個問題中我們如何解決，除了用style.display="block"可以解決外，還有另外一種辦法就是：
復制代碼 代碼如下:
<div id="name" style="display:none" >
My name is smile.
</div>
<script>
document.getElementById('name').style.display="";
</script>
My name is smile.
</div>
<script>
document.getElementById('name').style.display="";
</script>
就是把id為name的樣式用style這樣內置到標簽內，這樣不管用display=""還是display="block"就都可以正常顯示啦!
希望本文所述對大家基于javascript的web程序設計有所幫助。
相關文章
通過JS獲取Request.QueryString()參數的值實現方法
下面小編就為大家?guī)硪黄ㄟ^JS獲取Request.QueryString()參數的值實現方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
本文主要介紹了js轉換對象為xml的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細介紹了JavaScript實現圖片無縫滾動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vscode使用Prettier Code插件的詳細教程,本文通過圖文實例相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-09-09
本文主要介紹了JavaScript如何防止頁面退格鍵回退，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要為大家詳細介紹了javascript實現發(fā)送短信倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了JavaScript實現復選框全選或全取消操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)之使用云函數，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章給大家詳細介紹了JS是否可以跨文件同時控制多個iframe頁面的應用技巧，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2007-12-12
這篇文章主要介紹了JavaScript實現的Tween算法及緩沖特效,涉及JavaScript通過數學運算及樣式屬性操作實現緩動、彈性運動等效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11