<!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. 创建一个学生表student，默认的表空间为users，字段自定，同时为表的各个字段分别添加合适的约束，然后测试约束的验证状态。

    create table student(id number(4) constraint prim_key primary key,name varchar(8) not null,sex varch ...

  2. Milking Cows /// 区间计数 离散化排序 oj10105

    题目大意: 输入n  接下来描述1~n位农夫挤牛奶的开始与结束时间   Sample Input 3300 1000700 12001500 2100 Sample Output 900 300 注意 ...

  3. Docker学习のDocker和虚拟机

    最初听到Docker,是作为虚拟机来宣传的,但是它本质不是虚拟机 一.虚拟机 虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统. ...

  4. VMware 安装android-x86系统。

    首先先安装 VMware 虚拟机,并下载 android-x86_64-8.1-r2.iso 系统. VMware安装完成后,打开VMware Workstation,单击“创建新的虚拟机”,或者在菜 ...

  5. 双十一HostGator独立服务器方案

    一年一度的“双十一”购物狂欢节到来,各大电商平台线上消费的各种“吸金”开启了“双十一”模式,一年一度的“双十一”网购狂欢又开始以“巨大的价格优势”来勾起消费者的购买欲望. 此次双十一期间,HostGa ...

  6. 8.0后广播在AndroidManifest.xml中注册后发送intent接收不到广播

    8.0后广播在AndroidManifest.xml中注册后发送intent是接收不到广播了,看了一下原因,好像是8.0为了管理系统和节约电量特别针对广播和服务发送intent的方式启动做出的改变,也 ...

  7. 调整VMware中虚拟机中Linux系统屏幕分辨率的问题

    即:解决显示底部菜单栏以及安装软件中没有下一步的按钮用Tab键的问题 右击打开终端,输入以下命令: Xrandr Xrandr -s  1280x720 (自己选择一个分辨率即可) 原文:https: ...

  8. Altera: set pin locations using tcl

    1, compile the project; 2, store current tcl settings: Project –> Generate Tcl File from Project- ...

  9. 尚学python课程---13、python基础语法

    尚学python课程---13.python基础语法 一.总结 一句话总结: legend2系统使我能够快速掌握一门语法,特别有用 pass 语句:空语句:是为了保持程序结构的完整性  :作用:比如: ...

  10. 解决VirtualBox下关于CentOS7网络配置问题

    描述:安装了centos7,发现无法ping通网络,根据一些网上的建议,进行了一些修改,修改配置文件(/etc/sysconfig/network-scripts/ifcfg-enq03 ),但并没有 ...