<!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. 面试问烂的 MySQL 查询优化，看完屌打面试官！

    Java技术栈 ,一般把连接数设置得大一些). 并发量:同一时刻数据库服务器处理的请求数量 3.超高的 CPU使用率:CPU资源耗尽出现宕机. 4.磁盘 IO:磁盘 IO性能突然下降.大量消耗磁盘性能 ...

  2. codeforces round#524 C. Masha and two friends /// 矩形切割

    题目大意: 给定n行m列的黑白棋盘如下 给定矩形的左下点x1 y1和右上点x2 y2将这个区域都涂成白色 再给定矩形的左下点x3 y3和右上点x4 y4将这个区域都涂成黑色 求最后棋盘内有分别多少个白 ...

  3. 织梦自增函数[field:global name=autoindex/]常见用法

    看来不少朋友需要不了解这个自增函数的用法,在这里我列举一些常见的写法以及作用.   [field:global name=autoindex/] !--普通打印递增的数字-- [field:globa ...

  4. Linux安全审计-基础篇

    安全审计这块我能想到的有两种方案可以解决,一种是在Linux中配置实现,一种是使用Python开发堡垒机实现,我先实现了第一种比较简单的:后面会开发堡垒机:   一.首先我们需要在/etc/profi ...

  5. MySQL中查询所有数据库占用磁盘空间大小

    查询所有数据库占用磁盘空间大小的SQL语句: 复制代码 代码如下:select TABLE_SCHEMA, concat(truncate(sum(data_length)/1024/1024,2), ...

  6. 简单的GridView分业，后台不需要写

    1前台代码: <asp:GridView ID="GridView1" runat="server" AllowPaging="True&quo ...

  7. Windows系统查看xxx.dll、xxx.lib文件的导出函数、依赖文件等信息的方法

    1.查看xxx.dll或xxx.exe文件的导出函数.依赖文件等信息,使用Depends软件即可. 2.查看xxx.lib文件的导出函数.依赖文件等信息,使用Visual Studio附带工具dump ...

  8. CF698F Coprime Permutation

    题意:求有多少种符合要求的排列满足对于所有i,j,当gcd(i,j)=1时,gcd(pi,pj)=1. 排列上的一些位置给出. 标程: #include<bits/stdc++.h> us ...

  9. 【JZOJ6288】旋转子段

    description analysis 可以先用前缀和把原串不调整的方案数先求出来 对于一种翻转,肯定是把\([i..a[i]]\)或\([a[i]..i]\)这段区间翻转 也可以看做是以\({i+ ...

  10. php+jquery 上拉加载

    <script type="text/javascript"> var resflow = true,pages =2; var ps=$("#ids&quo ...