<!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. grep 的一些常用用法

    打印匹配到的上下5行 grep -C 5 'root' /etc/passwd            上下5行 grep -A 5 'root' /etc/passwd            afte ...

  2. C4D中python初探

    use_name = input('请输入账号') password = input('请输入密码') if use_name == 'alex' and password == 'alex3714' ...

  3. USACO2005 City Skyline /// oj23401

    题目大意: Input * Line 1: Two space separated integers: N and W * Lines 2..N+1: Two space separated inte ...

  4. POJ1149_PIGS(网络流/EK)

    PIGS Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 15721   Accepted: 7021 Description ...

  5. netty 文件传输

    FileServer package com.zhaowb.netty.ch13_1; import io.netty.bootstrap.ServerBootstrap; import io.net ...

  6. BZOJ2152 聪明可可 点分治

    题意传送门 思路:基本的点分治思路,num数组记录从u点开始路径长度分别为1或者2或者3的路径长度(取模3意义下),然后做一个简单的容斥就好了. 为了避免计数的麻烦,<u,u>这样的点单独 ...

  7. 2019牛客暑期多校训练营（第八场）I-Inner World DFS序+主席树（扫描线也可）

    题目传送门 题意:初始有n棵树,每棵树都只有1个n号节点,现在有m次添加操作,每次操作是将$[l,r]$范围内的树的$u$节点后面添加一个$v$节点.每个v节点只会被添加一次. 然后是q次询问,输出$ ...

  8. jquery无缝向上滚动实现代

    <!DOCTYPE html><html><head><style type="text/css">.renav{width:200 ...

  9. Python自学:第四章 在for循环结束后执行一些操作

    # -*- coding: GBK -*- magicians = ['alice', 'david', 'carolina'] for magician in magicians: print(ma ...

  10. 如何设置树莓派 VNC 的分辨率

    当我们使用 VNC 连接到树莓派时,默认的分辨率非常低.甚至无法显示整个桌面,因此我们需要对分辨率进行设置.在树莓派上设置 VNC 的分辨率很简单,在终端运行下面指令进入设置界面设置. 1 sudo ...