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>
效果：
