<!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. nutch2.2.1+mysql抓取数据

    基本环境:linux centos6.5 nutch2.2.1 源码包, mysql 5.5 ,elasticsearch1.1.1, jdk1.7 1.下载地址http://mirror.bjtu. ...

  2. 23-Ubuntu-文件和目录命令-查看文件内容-more 和 cat

    1. more---适合查看内容多的文件 格式: more 文件名 操作键 功能 空格键 显示手册页下一屏 Enter键 一次滚动手册页的一行 b 返回上一屏 f 前滚一屏 q 退出 例: more ...

  3. mysql 03章_完整性、约束

    .完整性:数据库中数据的可靠性有效性和合理性我们称为数据的完整性,这样才能保证数据合理符合现实生活中的数据体现. 注:数据完整性的设计应该在设计表的时候就进行设计了,而不是等到数据库中已经存在数据才进 ...

  4. ionic js 滑动框ion-slide-box 滑动框是一个包含多页容器的组件，每页滑动或拖动切换

    ionic 滑动框 ion-slide-box 滑动框是一个包含多页容器的组件,每页滑动或拖动切换: 效果图如下: 用法 <ion-slide-box on-slide-changed=&quo ...

  5. caffe安装 总结

    用的是matlab2018a,搞了一天 ubuntu 系统下的Caffe环境搭建 https://blog.csdn.net/hjimce/article/details/48781693 caffe ...

  6. opencv3.1.0 在控制台程序中报错：winnt.h(6464): error C2872: ACCESS_MASK: 不明确的

    在winnt.h里面有一个cv的命名空间,同样定义了一个ACCESS_MASK,跟opencv的cv::ACCESS_MASK发生了冲突!!! 该冲突在MFC中没有出现,在控制台程序中才会报错!对于o ...

  7. c#WinForm程序调用vsto动态库，已解决

    最近做一个vsto的项目,涉及到Form程序调用vsto动态库,弄了半天,搜了很多资料终于搞定了,把积累写下来备以后用.相关网址: https://stackoverflow.com/question ...

  8. bc 进制间转换

    我们通过bc的ibase和obase方法来进行进制转换 ibase是输入数字的进制,而obase就是输出数字的进制 两种方式进行转化 交互式的 ==注意:需要先设置obase== [root@dev ...

  9. thinkphp 模板继承

    模板继承是一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层.模板继承其实并不难理解,就好比类的继承一样,模板也可以定义一个基础模板(或者是布局),并且其中定义相关的区 ...

  10. 如何区分无线AP跟无线路由器

    无线AP是一个无线网络的接入点,俗称“热点”.主要有路由交换接入一体设备和纯接入点设备,一体设备执行接入和路由工作,纯接入设备只负责无线客户端的接入,纯接入设备通常作为无线网络扩展使用,与其他AP或者 ...