JavaScript实现页面元素显示/隐藏的功能

最新推荐文章于 2023-05-01 14:54:43 发布

DawnRayYang

最新推荐文章于 2023-05-01 14:54:43 发布

阅读量6.9k

点赞数

分类专栏： Karrigell 文章标签： javascript table string html5 struct layout

本文链接：https://blog.csdn.net/xbl1986/article/details/7046937

版权

Karrigell 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

参考：http://www.w3school.com.cn

不知道HTML5+CSS3能不能完成，还没有研究过。网上参考到的是用JS来实现的。主要是JS获取事件，改变属性，印象显示/隐藏的发生。

JS比较高层的使用如下：

HTML DOM Style 对象

Style 对象

Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。

使用 Style 对象属性的语法：

document.getElementById("id").style.property="值"

通过上面的语句，获取id这个对象，然后设置其style。

Layout 属性

display	设置元素如何被显示

display

设置元素如何被显示

这个说明了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 οnclick="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>

DawnRayYang

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现页面元素显示/隐藏的功能

参考：http://www.w3school.com.cn不知道HTML5+CSS3能不能完成，还没有研究过。网上参考到的是用JS来实现的。主要是JS获取事件，改变属性，印象显示/隐藏的发生。JS比较高层的使用如下：HTML DOM Style 对象Style 对象Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。
复制链接

扫一扫

专栏目录