<!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. centos安装完php-fpm、nginx后访问网站出现权限问题

    nginx.conf www.conf 这两个文件上面改用户为www. 如果不知道自己的配置文件位置问题,使用命令查找文件位置: find / -name 'nginx.conf' -print 添加 ...

  2. opencv remap 函数

    remap 查看:https://blog.csdn.net/yangfengman/article/details/52769716 remap 其实就是一个坐标到另一个坐标的映射,比如经常用在鱼眼 ...

  3. java 与日期转换相关的方法（java.util.date类型和java.sql.date类型互相转换）、随机字符串生成方法、UUID生产随机字符串

    package com.oop.util; import java.text.*; import java.util.UUID; import org.junit.Test; /* * 与日期相关的工 ...

  4. springboot mail 发送邮件

    新开发了一个新的功能,要求使用java发送邮件,在此记录下代码,以方便后来者: 1.首先需要开通邮箱,开通smtp功能,我这边使用的是新浪邮箱,试过163.qq,比较麻烦,后来看到别人使用新浪,直接使 ...

  5. java String，StringBuilder和StringBuffer类的区别

    对String而言: String是只读字符串,所引用的字符串不能被改变,一经定义,无法再增删改. String 定义的字符串保存在常量池里面,进行+操作时不能直接在原有基础上拼接. 每次+操作 : ...

  6. 记一次数据丢失（电脑硬盘closed to down）的经历

    早上-高高兴兴上班去. 到了公司,突然发现出现windows.logo一两秒的时候会蓝屏,surprise. 百度了一下代码,ok修改硬盘格式,从ACHI到IDE 进入Bios,嗯?感觉界面变了,咋回 ...

  7. day33 序列类型，绑定方法，类方法，静态方法，封装继承和多态

    Python之路,Day20 = 序列类型,绑定方法,类方法,静态方法,封装继承和多态 序列是指有序的队列,重点在"有序". 一.Python中序列的分类 Python中的序列主要 ...

  8. thinkphp 页面Trace信息

    调试模式并不能完全满足我们调试的需要,有时候我们需要手动的输出一些调试信息.除了本身可以借助一些开发工具进行调试外,ThinkPHP还提供了一些内置的调试工具和函数.例如,页面Trace功能就是Thi ...

  9. php curl的正确使用方法

    在做一个读取远程抓取数据并显示的demo的时候,遇到了以下几个问题: 1.用的curl变量进行了多定义 2.抓取远程数据时没有返回正确的json数据 没有返回正确的json数据不是因为网站提供的接口问 ...

  10. Java lambda尝鲜

    最近Java 11都出来了,java 8 的很多新特性还没用过,比如接口可以有方法体啦,default默认方法. 当然最大的特性就是支持函数式编程了.Java 8 提供了lambda表达式和方法引用来 ...