<!DOCTYPE html>

<html>

<head>

<script>

function showDetails(animal) {

    var animalType = animal.getAttribute("data-animal-type");

    alert(animal.innerHTML + "是一种" + animalType + "。");

}

</script>

</head>

<body>

<h1>物种</h1>

<p>点击某个物种来查看其类别：</p>

<ul>

  <li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li>

  <li onclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li>

  <li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蝇虎</li>

</ul>

</body>

</html>

使用 data-* 属性来嵌入自定义数据：的更多相关文章

  1. 使用 data-* 属性来嵌入自定义数据

    1. HTML 实例 <ul> <li data-animal-type="bird">Owl</li> <li data-animal- ...

  2. HTML data属性简介以及低版本浏览器兼容算法

    实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...

  3. 【翻译】详解HTML5 自定义 Data 属性

    原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...

  4. js（jQuery）获取自定义data属性的值

    有时候因为需要在标签上设置自定义data属性值, <div class="col-sm-6 col-md-4" id="get_id" data-c_id ...

  5. 利用data属性来存json、和取数据还原json

    data属性用JSON.stringify转化为字符串存进去,,,取出来自动会变成json数组的

  6. js获取自定义data属性

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. html 5实用特性之data属性

    HTML 5之前,我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段,这种做法有时会在网站的外观和实用性之间产生冲突.而HTML 5 Data属性的存在就能很好满足需要. HTML5 ...

  8. html5 data属性的使用

    html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data- ...

  9. 《驾驭Core Data》 第三章 数据建模

    本文由海水的味道编译整理,请勿转载,请勿用于商业用途.    当前版本号:0.1.2 第三章数据建模 Core Data栈配置好之后,接下来的工作就是设计对象图,在Core Data框架中,对象图被表 ...

随机推荐

  1. adostoredproc用法 因为用的少每次还得看一下代码，记下来

    {1.关闭2.清除参数(固定的可省略)3.参数赋值4.打开(或执行)如果有感知控件的话 就会显示出结果} ADOStoredProc1.close; //关闭 ADOStoredProc1.param ...

  2. HDU 3308 线段树求区间最长连续上升子序列长度

    题意:两种操作,Q L R查询L - R 的最长连续上升子序列长度,U pos val 单点修改值 #include <bits/stdc++.h> #define N 100005 us ...

  3. gcc 4步编译过程

    一. gcc编译过程  1. 预处理: 主要进行宏替换以及头文件的展开  gcc  -E   *.c  -o  *.i 2.  编译::编译生成汇编文件,会检查语法错误   gcc  -S   *.i ...

  4. 【2-SAT】[JSOI2010]满汉全席

    感觉方法和题解差不多,但是题解写的好烦啊...也不是烦,就是很复杂 这里建议开一个数组表示当前这个点选或者不选的编号,这样之后自己理思路也会清楚一点 然而我调了一个小时才发现我是Tarjan写错了.. ...

  5. [java]反转单项链表，用O(n)时间和O(1)空间

    链表数据结构 public class ListNode { public int val; public ListNode next; public ListNode(int x) { val = ...

  6. mysql-connetor-c 自动创建数据库、数据库表的命令

    1.首先连接MySQL默认的数据库mysql // 参数说明: // strIP: MySQL数据库的IP地址 // nPort: MySQL数据库的端口号 // strDBName: 要连接的数据库 ...

  7. 使用FastJson转化Json格式

    1.下载Jar包 http://repo1.maven.org/maven2/com/alibaba/fastjson/ 2.将jar包导入工程 3.示例 package nc.testFastJso ...

  8. CCPC-WFinal-女生专场

    1001:CCPC直播   字符串处理,几个if语句 1002:口算训练   前缀和处理<=根号n的因数,大于根号n的因数每个数至多有一个,用vector存下每个大因数的位置,map离散化.查询 ...

  9. 好用的抓取dump的工具-ProcDump

    Procdump是一个轻量级的Sysinternal团队开发的命令行工具, 它的主要目的是监控应用程序的CPU异常动向, 并在此异常时生成crash dump文件, 供研发人员和管理员确定问题发生的原 ...

  10. Acess link