JavaScript實現頁面元素顯示/隱藏的功能
阿新 • • 發佈：2019-02-03
不知道HTML5+CSS3能不能完成，還沒有研究過。網上參考到的是用JS來實現的。主要是JS獲取事件，改變屬性，印象顯示/隱藏的發生。
JS比較高層的使用如下：
HTML DOM Style 物件
Style 物件
Style 物件代表一個單獨的樣式宣告。可從應用樣式的文件或元素訪問 Style 物件。
使用 Style 物件屬性的語法：
document.getElementById("id").style.property="值"
通過上面的語句，獲取id這個物件，然後設定其style。
這個說明了style的display屬性是個關鍵點。用來控制顯示/隱藏的。定義和用法
display 屬性設定元素如何顯示。
語法：
Object.style.display=value
下面看看能使用的值。
Possible Values
| 值 | 描述 |
|---|---|
| none | 此元素不會被顯示。 |
| block | 此元素將顯示為塊級元素，此元素前後會帶有換行符。 |
| inline | 預設。此元素會被顯示為內聯元素，元素前後沒有換行符。 |
| list-item | 此元素會作為列表顯示。 |
| run-in | 此元素會根據上下文作為塊級元素或內聯元素顯示。 |
| compact | 此元素會根據上下文作為塊級元素或內聯元素顯示。 |
| marker | |
| table | 此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有換行符。 |
| inline-table | 此元素會作為內聯表格來顯示（類似 <table>），表格前後沒有換行符。 |
| table-row-group | 此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。 |
| table-header-group | 此元素會作為一個或多個行的分組來顯示（類似 <thead>）。 |
| table-footer-group | 此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。 |
| table-row | 此元素會作為一個表格行顯示（類似 <tr>）。 |
| table-column-group | 此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。 |
| table-column | 此元素會作為一個單元格列顯示（類似 <col>） |
| table-cell | 此元素會作為一個表格單元格顯示（類似 <td> 和 <th>） |
| table-caption | 此元素會作為一個表格標題顯示（類似 <caption>） |
下面有個例項程式碼
<!DOCTYPE HTML>
<head>
<meta charset=utf-8" >
<script type="text/javascript">
function openShutManager(oSourceObj,oTargetObj,shutAble){
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
if(targetObj.style.display!="none"){
if(!shutAble) return;
targetObj.style.display="none";
} else {
targetObj.style.display="table";
}
}
</script>
<title>展開/收起</title>
</head>
<body>
<p onclick="openShutManager(this,'Elf32_Ehdr',true)">
typedef struct {<br>
<p id="Elf32_Ehdr" style="display:none">
unsigned char e_ident[16];<br>
Elf32_Half e_type;<br>
Elf32_Half e_machine;<br>
Elf32_Word e_version;<br>
Elf32_Addr e_entry;<br>
Elf32_Off e_phoff;<br>
Elf32_Off e_shoff;<br>
Elf32_Word e_flags;<br>
Elf32_Half e_ehsize;<br>
Elf32_Half e_phentsize;<br>
Elf32_Half e_phnum;<br>
Elf32_Half e_shentsize;<br>
Elf32_Half e_shnum;<br>
Elf32_Half e_shstrndx;<br>
</p>
}Elf32_Ehdr;<br>
</body>
</html>
</body>