<!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. elasticsearch实现读写分离

    简介 今天我们不讲三国,我们讲一讲elasticsearch(以下简称ES)读写分离,这是个好东西,全文索引的时候使用它贼得劲,对elasticsearch索引原理不太清楚的,请自行查找相关的文章 这 ...

  2. OpenLiveWriter博客工具

    1.OpenLiveWriter安装 官网下载地址:http://openlivewriter.org/ 默认安装到:C:\Users\用户\AppData\Local\OpenLiveWriter目 ...

  3. Spring Cloud高级视频

    Spring Cloud高级视频 第一章 微服务架构概述 第二章 开始使用Spring Cloud实战微服务 第三章 服务提供者与服务消费者 第四章 服务发现与服务注册 第五章 使用Hystrix保护 ...

  4. 实现div里面有placeholder形式

    样式中设置content为元素的data-值 p{ color: deepskyblue; } p:before{ content: attr(data-beforeContent); color: ...

  5. 蛮好用的Gungho重点工作督查督办跟踪管理系统

    重点工作督查督办跟踪管理系统可以实现: 为了确保上级重要决定.指示和本单位重大目标和工作部署及时落到实处,确定实效,提升办事效率. 重点工作督查督办事项包括: 1)上级单位或领导的批示指示: 2)公司 ...

  6. CSIC_716_20191125【面向对象编程--类以及类的实例化】

    面向对象编程:是一种编程思想 对象的定义:特征与功能的集合体 优点:可扩展性强 缺点:编程复杂度高,难度偏大 类的定义:一系列对象之间相同特征与技能的结合体 调用类的时候(实例化是时候),发生的事情: ...

  7. Altera FPGA– Bit Slip

    通过在接收端加延时,在延时间隙插入'0'或'1',以使最终接收和期望数据一致. BitSlip操作要注意几点: 1,BitSlip操作在rx_bitslip的上升沿即开始: 2,BitSlip操作开始 ...

  8. thinkphp action参数绑定

    参数绑定是通过直接绑定URL地址中的变量作为操作方法的参数,可以简化方法的定义甚至路由的解析. 参数绑定功能默认是开启的,其原理是把URL中的参数(不包括模块.控制器和操作名)和操作方法中的参数进行绑 ...

  9. SSM14-通过AOP实现日志记录

    1.要求使用AOP思想,实现对每一个用户登陆后,将以下信息保存在数据库 1>登陆时间 2>退出时间 3>登录的IP地址 4>访问点URL(访问了那些Controller) 5& ...

  10. nginx css,js合并插件，淘宝nginx合并js，css插件

    先下载Nginx_concat_module,下载后把它放在/usr/local/src/文件夹中,新建文件夹nginx-http-concat把下载的config  ngx_http_concat_ ...