HTML 5 常用的交互元素————内容交互元素（1）

在HTML 5中，交互元素分为三类：

内容交互元素

菜单交互元素

状态交互元素

内容交互元素：<details>和<summary>元素属于新增的内容交互元素，主要用于文档的标题、细节、内容的交互显示。

details元素：用于说明文档或某个细节信息的作用，常与<summary>元素配合使用。

默认情况下，标记中的内容是不显示的，当和<summary>配合使用后，单击<summary>后，下显示<details>中设置的内容。

details元素的属性以及描述：

属性值描述

open open 用于控制<details>元素是否显示，默认不可见

subject sub_id 用设置元素所对应的项目ID号

draggable true/false 设置是否可以拖动元素，默认false

实例1：通过设置该元素的open属性值和设置该属性值为“open”进行比较（样式）

<!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;
diplay:block;
}
details[open]{
height:auto;
}
</style>
</head>

<body>
<span>隐藏脚注</span>
<details>本页面生成于 2018-01-01</details>


</body>
</html>

实例2：用脚本控制交互元素<details>的使用

<!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;
diplay:block;
}
details[open]{
height:auto;
}
</style>
</head>

<body>
<span onClick ="span1-click；">脚注</span>
<details id="details">本页面生成于 2018-01-01</details>
<script type="text/javascript">
//根据属性控制的内容是否显示
Function span1_click(){
var objD=document.getElementById("details");
var attD=objD.getAttribute("open"); //getAttribute()方法获取<details>元素的"open"属性，然后判断元素的属性值，值为“open”时，利用removeAttribute（）方法删除

if(attD!="open"){
objD.removeAttribute("open");
}
}
</script>
</body>
</html>

点击脚注字符后，会显示。。。。

posted @ 2018-01-01 15:18 素心依旧阅读(2558) 评论(0) 收藏举报

刷新页面返回顶部