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)，這樣寫有錯(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)題先放開，我們先看現(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)文章
JavaScript使用百度ECharts插件繪制餅圖操作示例
這篇文章主要介紹了JavaScript使用百度ECharts插件繪制餅圖操作,結(jié)合實(shí)例形式分析了JavaScript使用百度ECharts插件繪制餅圖的原理、步驟及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-11-11
JavaScript三種常用網(wǎng)頁(yè)特效詳解
這篇文章主要介紹了可以用JavaScript實(shí)現(xiàn)的常用的三種網(wǎng)頁(yè)特效：offset系列、client系列、scroll系列。文中示例代碼簡(jiǎn)潔易懂，感興趣的小伙伴可以了解一下2021-12-12
這篇文章主要介紹了JavaScript的類型、值和變量小結(jié)的相關(guān)資料,需要的朋友可以參考下2015-07-07
跟我學(xué)習(xí)javascript的基本類型和引用類型
跟我學(xué)習(xí)javascript的基本類型和引用類型，利用圖解的方式，告訴大家javascript的基本類型和引用類型的區(qū)別和聯(lián)系，感興趣的小伙伴們可以參考一下2015-11-11
使用mixins實(shí)現(xiàn)elementUI表單全局驗(yàn)證的解決方法
這篇文章主要介紹了使用mixins實(shí)現(xiàn)elementUI表單的全局驗(yàn)證的解決方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
JS中touchstart事件與click事件沖突的解決方法
這篇文章主要給大家介紹了關(guān)于JS中touchstart事件與click事件沖突的解決方法，文中通過(guò)示例代碼將解決的方法介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-03-03
你知道JavaScript中的結(jié)果值是什么嗎？這篇文章主要介紹了JavaScript結(jié)果值，感興趣的小伙伴們可以參考一下2016-10-10
淺析JavaScrip如何實(shí)現(xiàn)優(yōu)雅地退出函數(shù)
退出函數(shù)怎么寫？有人會(huì)說(shuō)一個(gè)?return?就退出函數(shù)了,有這么簡(jiǎn)單嗎？這篇文章小編就來(lái)和大家詳細(xì)聊聊如何在JavaScrip中優(yōu)雅地退出函數(shù)吧2024-03-03
JavaScript實(shí)踐之使用Canvas開發(fā)一個(gè)可配置的大轉(zhuǎn)盤抽獎(jiǎng)功能
公司項(xiàng)目搞優(yōu)惠活動(dòng),讓做一個(gè)轉(zhuǎn)盤抽獎(jiǎng)的活動(dòng),這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)踐之使用Canvas開發(fā)一個(gè)可配置的大轉(zhuǎn)盤抽獎(jiǎng)功能的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
layui實(shí)現(xiàn)下拉復(fù)選功能的例子(包括數(shù)據(jù)的回顯與上傳)
今天小編大家分享一篇layui實(shí)現(xiàn)下拉復(fù)選功能的例子(包括數(shù)據(jù)的回顯與上傳)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09