<!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. 注意：阿里Druid连接池监控的两个坑

    阿里的Druid大家都知道是最好的连接池,其强大的监控功能是我们追求的重要特性.但在实际情况中也有不少坑,说下最近遇到的一个坑吧! 问题1:不断打印error级别的错误日志 session ip ch ...

  2. jQuery post使用变量作参数名

    jQuery Query Post使用方法: $.post("test.php", { name: "John", time: "2pm" ...

  3. 基于第三方开源库的OPC服务器开发指南（1）——OPC与DCOM

    事儿太多,好多事情并不以我的意志为转移,原想沉下心好好研究.学习图像识别,继续丰富我的机器视觉库,并继续<机器视觉及图像处理系列>博文的更新,但计划没有变化快,好多项目要完成,只好耽搁下来 ...

  4. 2019-5-21-win10-uwp-xaml-兼容多个版本条件编译

    title author date CreateTime categories win10 uwp xaml 兼容多个版本条件编译 lindexi 2019-5-21 11:19:3 +0800 20 ...

  5. 【学术篇】SDOI2011 计算器

    好一道三合一...(然而被我做成了四合一) 其实1 2 3是独立的OvO 然后就可以逐个分析了... 1 快速幂..就不说了..(我省选的时候有这么水的20pts部分分么←_← 2 两种做法(写在标题 ...

  6. C#利用资源文件设置软件自适应多语言

    在项目更目录下添加两个资源文件,以适应中英文两种版本,如Resource.zh_CN.resx和      Resource.en-US.resx  ,两个资源文件的ID都一样,值分别配置相应的中英文 ...

  7. PHP算法之猜数字

    小A 和 小B 在玩猜数字.小B 每次从 1, 2, 3 中随机选择一个,小A 每次也从 1, 2, 3 中选择一个猜.他们一共进行三次这个游戏,请返回 小A 猜对了几次? 输入的guess数组为 小 ...

  8. Docker的镜像 导出导入

    查看当前已经安装的镜像 vagrant@vagrant:~$ sudo docker images REPOSITORY TAG IMAGE ID CREATED SIZE mysql 5.7.22 ...

  9. SpringDataJPA在Entity中常用的注解浅析

    首先我们常用的注解包括(@Entity.@Table.@Id.@IdClass.@GeneratedValue.@Basic.@Transient.@Column.@Temporal.@Enumera ...

  10. openwrt xfrp移植

    对开源软件表示支持 https://github.com/KunTengRom/xfrp 上传编译,选择 cp .config xxx make 刷机 客户端配置文件: /tmp/etc# cat x ...