div控制顯示與隱藏狀態的兩種方式
阿新 • • 發佈:2018-11-10
要點:
1.本人原來用的是IDEA編譯器,因為什麼環境都配置好了,程式碼提示功能也好,介面也優美,可惜什麼都好導致太龐大。本人在自習室敲程式碼,筆記本電池管不了一上午,後用sublime,真輕便哈哈。但是裡面的外掛的程式碼其實,應該是隻收錄了js的關鍵字,然後給的提示,並不會篩選。這裡,因為前段時間寫網頁佈局,用了很多浮動,有個overflo:hidden經常用,這裡寫了display:hidden,並且還是提示出來的。找了半天原因,所以,不要相信此編譯器外掛的提示,看API。
2. 通過第一種方式,改變display屬性,注意一定不要直接使用 my$(id).display來修改樣式,要在前面加上.style如my$(id).style.display
通過第二種方式,主要記住class屬性不能通過my$(id).class這樣會跟關鍵字衝突,改成my$(id).className
html和js程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div{ width: 250px; height: 250px; background-color: greenyellow; display: none; //預設不顯示 } .show{ width: 250px; height: 250px; background-color: greenyellow; } </style> </head> <body> <input type="button" value="顯示" id="btn"> <div id="div"></div> <br/> <input type="button" value="顯示" id="btn2"> <div id="div2"></div> <script type="text/javascript"> function my$(id){ return document.getElementById(id); } //封裝通過元素id名,獲取元素的方法 my$("btn").onclick=function(){ if(this.value == "顯示"){ my$("div").style.display="block"; this.value="隱藏"; // 預設不顯示,改變其狀態 }else{ my$("div").style.display="none"; this.value="顯示"; // 通過點選後成顯示狀態,改為不顯示狀態 } } </script> <script type="text/javascript"> function my$(id){ return document.getElementById(id); } //封裝通過元素id名,獲取元素的方法 my$("btn2").onclick = function(){ if(my$("div2").className != "show"){ my$("div2").className = "show"; this.value = "顯示"; // 一開始預設的是沒有class類名,所以沒有效果視覺效果是隱藏,其實是沒有樣式 // 通過響應點選事件,將元素 }else{ my$("div2").className = "hidden"; this.value = "隱藏"; } } </script> </body> </html>
效果: