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()方法增加该属性。

【HTML5】用脚本控制交互元素details元素的使用的更多相关文章

  1. h5交互元素details标签

    details是h5新增的交互元素,details与 summary 标签配合使用可以为 details 定义标题.默认情况下,不显示 details 标记中的内容.当用户点击标题时,会显示出 det ...

  2. HTML5不允许写结束标记的元素

    HTML5不允许写结束标记的元素 1.area 2.base 3.br 4.col 5.command 6.embed 7.img 8.hr 9.keygen 10.link 11.meta 12.p ...

  3. NGUI---使用脚本控制聊天系统的内容显示，输入事件交互

    在我的笔记Unity3D里面之 简单聊天系统一 里面已经介绍怎么创建聊天系统的背景.给聊天系统添加滚动条,设置Anchor锚点.以及设计聊天系统的输入框. 效果图如下所示: 现在我们要做的就是使用脚本 ...

  4. html5中新增的非主体结构的元素

    html5中出了新增了article.section.nav.aside.time主要结构元素外,还增加了一些表示逻辑结构或附加信息的非主体结构元素. 一.header元素 header元素是一种具有 ...

  5. CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

  6. HTML5中重新定义的 b 和 i 元素

    HTML5强调元素的语义,而非表现.b和i元素是早期HTML遗留下来的产物,它们分别用于将文本变为粗体和斜体(那时CSS还未出现). 当时的规范建议编码人员用strong替代b,用em替代i.不过,事 ...

  7. css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

    一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...

  8. ArrayList 实现删除重复元素（元素为对象类型）

    package 集合; import java.util.ArrayList;import java.util.Iterator; /* * 删除集合中的重复的元素(元素是对象形式的) *  * Li ...

  9. WPF学习笔记（一）：数据绑定之元素到元素绑定

    前言 作为一只菜鸟,之前学了一段时间的WPF,但是没有总结,过了一学期发现好多东西都忘记了,很多东西还是需要记下来,以备后续复习. 数据绑定在事件中应用非常广泛,可以有效地减少代码量,那么什么是数据绑 ...

随机推荐

  1. PHP-MYSQL时间

     Unix 时间戳  Unix timestamp ('1970-01-01 00:00:00' GMT 之后的秒数) MySQL: FROM_UNIXTIME() 给定一个Unix 时间戳 (可以是 ...

  2. 在PE中，新增节，添加代码

    在PE中,新增节,添加代码 一.先判断节表后是否有空闲位置,添加节表信息,必须多出两个节表位置,最后以零结尾. 二.新增节后,需要修改以下信息 1.添加一个新节,可以复制一份,最好是拥有可执行属性的节 ...

  3. Selenium2+python自动化2-pip降级selenium3.0【转载】

    selenium版本安装后启动Firefox出现异常:'geckodriver' executable needs to be in PATH selenium默默的升级到了3.0,然而网上的教程都是 ...

  4. GitHub和GitLab的区别 转自（zhang_oracle）

    把代码从GitHub上迁移到GitLab上,在使用一段时间过后,发现GitLab与GitHub还是有不少区别的. 先说一下相同点,二者都是基于web的Git仓库,在很大程度上GitLab是仿照GitH ...

  5. hdu 1162(最小生成树)

    Eddy's picture Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  6. uva11107（后缀数组）

    uva11107 题意 输入 n 个 DNA 序列,求出长度最大的字符串,使得它在超过一半的 DNA 序列中连续出现.如果有多解,按字典序输出. 分析 论文 后缀数组经典题.加深几个关键数组的印象. ...

  7. [Lydsy1710月赛] 小B的数字

    神TM 又又又又是构造题..... 很简单的化简就是,把2^k[i]都换成k[i] ,然后就可以得出 对于任意的i,k[i] * a[i] >= ∑k[]. 最优的构造肯定是使  k[i] = ...

  8. 六. 异常处理9.finally块

    当异常被抛出,通常方法的执行将作一个陡峭的非线性的转向.依赖于方法是怎样编码的,异常甚至可以导致方法过早返回.这在一些方法中是一个问题.例如,如果一个方法打开一个文件项并关闭,然后退出,你不希望关闭文 ...

  9. PHP switch的“高级”用法详解

    只所以称为“高级”用法,是因为我连switch的最基础的用法都还没有掌握,so,接下来讲的其实还是它的基础用法! switch 语句和具有同样表达式的一系列的 IF 语句相似.很多场合下需要把同一个变 ...

  10. Delphi创建开机启动项的方法示例

    Delphi可以通过创建开机启动项键值的方法,将程序添加到开机启动项中.通过本实例代码就可以为您的程序添加到快速启动中,随着Windows一起启动,开机即运行的程序.该实例代码简单,主要是通过添加注册 ...