1.源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>脚本控制交互元素</title> </head> <body> <span onClick="span1_click()">脚注</span> <details id="detials1">本页生成于2017年09月20日</details> <script type="text/javascript"> //根据属性控制内容是否显示 function span1_click(){ var objD = document.getElementById("detials1"); var attD = objD.getAttribute("open"); if(attD != "open"){ objD.setAttribute("open","open"); }else{ objD.removeAttribute("open"); } } </script> </body> </html>
2.页面效果
2.1点击脚注前
2.2点击脚注后
在Javascript中，使用getAttribute()方法获取<details>元素的“open”属性，然后判断元素的属性值，当该值为“open”时，利用removeAttribute()方法删除<details>元素的“open”属性；反之，使用setAttribute()方法增加该属性。