本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.6节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
在本实例的页面中，分别加入了一个< span >元素和< details >元素。当单击< span >标记时，将根据< details >元素的属性值显示元素内容。具体实现原理是，先使用方法getAttribute()获取< details >元素的“open”属性，然后判断获取的元素属性值。当该值为“open”时，利用方法removeAttribute()删除< details >元素的“open”属性；反之，使用方法setAttribute()增加该属性。
具体实现
使用Dreamweaver创建一个名为“006.html”的文件，具体代码如下所示：
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>脚本控制交互元素<details></title> <style type="text/css"> body{ font-size:12px } span{ font-weight:bold; } details { overflow: hidden; height: 0; padding-left:200px; position: relative; display: block; } details[open] { height:auto; } </style> </head> <body> <span onClick="span1_click();">单击我试试</span> <details id="details1"> 生成于 2012-05-17 </details> <script type="text/javascript"> //根据属性控制是否显示内容 function span1_click(){ var objD=document.getElementById("details1"); var attD=objD.getAttribute("open"); if(attD!="open"){ objD.setAttribute("open","open"); }else{ objD.removeAttribute("open"); } } </script> </body> </html>执行后只显示文字“点击我试试”，如图1-9所示。单击文字之后，在页面右侧显示详细信息文字，如图1-10所示。
https://yqfile.alicdn.com/b5acaed5186aa822183850a91ced7bcab527e432.png" >如果单击详细信息前的小三角形，则详细信息消失，只显示文字“单击我试试”，如图1-11所示。
相关资源：从入门到精通HTML5——PDF——网盘链接