DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js中style.display=無效的解決方法
js中style.display=無效的解決方法
編輯:關於JavaScript     

本文實例講述了js中style.display=""無效的解決方法。分享給大家供大家參考。具體解決方法如下:

一、問題描述:

在js中我們有時想動態的控制一個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>

css定義了id為name的div為隱藏,而我們在頁面加載完成之後用js控制該id顯示出來,這樣寫有錯麼?
木有錯?可是為什麼界面上還是空白呢?

二、解決方法:

記得還有一個用法是xxx.style.display="block" 那我們試試吧,
嗚呼,竟然顯示了!!!

那我們查看一下style.display=""和style.display="block"用法有什麼不同吧。
其實,這兩個的最大區別是block是塊顯示的,所以會換行,那麼既然就這麼點區別,為什麼在本例子中一個可以顯示,一個不行呢?困擾。
好吧,這個問題先放開,我們先看現在這個問題中我們如何解決,除了用style.display="block"可以解決外,還有另外一種辦法就是:

復制代碼 代碼如下:<div id="name" style="display:none" >
My name is smile.
</div>
<script>
     document.getElementById('name').style.display="";
</script>

就是把id為name的樣式用style這樣內置到標簽內,這樣不管用display=""還是display="block"就都可以正常顯示啦!

希望本文所述對大家基於javascript的web程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved