點擊按鈕來顯示隱藏上面的aaaaaaa。
初始狀態他是隱藏的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div{display:none}
</style>
</head>
<body>
<div class="top" id="div">
aaaaaaaaaaaaaaaaaaa
</div>
<button id="btn">顯示</button>
<script>
btn.οnclick=function(){
var elem=document.getElementById("div");
var btn=document.getElementById("btn");
if(elem.style.display=="none"){
btn.innerHTML="隱藏";
elem.style.display="block";
}else{
btn.innerHTML="顯示";
elem.style.display="none";
}
}
</script>
</body>
</html>
這樣寫的話。就會出現第一次點擊無效。需要第二次點擊纔出現效果。這是爲什麼呢？
因爲elem.style.display這樣獲取的是elem元素的行內樣式。但是默認的行內沒有樣式的。所以他第一次點擊的時候就走了else。給他加了一個行內的樣式。然後再點擊就是正常需要的效果了、
那如何解決這個問題呢？看看下面的鏈接就知道啦
window.getComputedStyle() 方法的使用
btn.οnclick=function(){
var elem=document.getElementById("div");
var btn=document.getElementById("btn");
if(window.getComputedStyle(elem, null).display=="none"){
btn.innerHTML="隱藏";
elem.style.display="block";
}else{
btn.innerHTML="顯示";
elem.style.display="none";
}