js中style.display=""無(wú)效的解決方法
本文實(shí)例講述了js中style.display=""無(wú)效的解決方法。分享給大家供大家參考。具體解決方法如下：
一、問(wèn)題描述：
在js中我們有時(shí)想動(dòng)態(tài)的控制一個(gè)div顯示或隱藏或更多的操作，但如果我們style.display=""可能導(dǎo)致沒(méi)有效果。
看下面一段代碼：
#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為隱藏，而我們?cè)陧?yè)面加載完成之后用js控制該id顯示出來(lái)，這樣寫(xiě)有錯(cuò)么？
木有錯(cuò)？可是為什么界面上還是空白呢？
二、解決方法：
記得還有一個(gè)用法是xxx.style.display="block" 那我們?cè)囋嚢桑?br /> 嗚呼，竟然顯示了！?。?/p>
那我們查看一下style.display=""和style.display="block"用法有什么不同吧。
其實(shí)，這兩個(gè)的最大區(qū)別是block是塊顯示的，所以會(huì)換行，那么既然就這么點(diǎn)區(qū)別，為什么在本例子中一個(gè)可以顯示，一個(gè)不行呢?困擾。
好吧，這個(gè)問(wèn)題先放開(kāi)，我們先看現(xiàn)在這個(gè)問(wèn)題中我們?nèi)绾谓鉀Q，除了用style.display="block"可以解決外，還有另外一種辦法就是：
My name is smile.
</div>
<script>
document.getElementById('name').style.display="";
</script>
就是把id為name的樣式用style這樣內(nèi)置到標(biāo)簽內(nèi)，這樣不管用display=""還是display="block"就都可以正常顯示啦!
希望本文所述對(duì)大家基于javascript的web程序設(shè)計(jì)有所幫助。
相關(guān)文章
通過(guò)JS獲取Request.QueryString()參數(shù)的值實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇通過(guò)JS獲取Request.QueryString()參數(shù)的值實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
本文主要介紹了js轉(zhuǎn)換對(duì)象為xml的方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
JavaScript實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vscode使用Prettier Code插件的詳細(xì)教程
這篇文章主要介紹了vscode使用Prettier Code插件的詳細(xì)教程,本文通過(guò)圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-09-09
本文主要介紹了JavaScript如何防止頁(yè)面退格鍵回退，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
javascript實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript實(shí)現(xiàn)復(fù)選框全選或全取消操作
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)復(fù)選框全選或全取消操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)之使用云函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
JS是否可以跨文件同時(shí)控制多個(gè)iframe頁(yè)面的應(yīng)用技巧
這篇文章給大家詳細(xì)介紹了JS是否可以跨文件同時(shí)控制多個(gè)iframe頁(yè)面的應(yīng)用技巧，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2007-12-12
JavaScript實(shí)現(xiàn)的Tween算法及緩沖特效實(shí)例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的Tween算法及緩沖特效,涉及JavaScript通過(guò)數(shù)學(xué)運(yùn)算及樣式屬性操作實(shí)現(xiàn)緩動(dòng)、彈性運(yùn)動(dòng)等效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11