HTML5的自定义属性data-*详细介绍和JS操作实例

当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。

例如:

复制代码

代码如下:

<div id = "user" data-uid = "12345" data-uname = "脚本之家" > </div>

使用attribute方法存取 data-* 自定义属性的值

使用attributes方法存取 data-* 自定义属性的值非常方便:

复制代码

代码如下:

// 使用getAttribute获取 data- 属性
var user = document . getElementById ( ‘user‘ ) ;
var userName = plant . getAttribute ( ‘data-uname‘ ) ; // userName = ‘脚本之家‘
var userId = plant . getAttribute ( ‘data-uid‘ ) ; // userId = ‘12345‘

// 使用setAttribute设置 data- 属性
user . setAttribute ( ‘data-site‘ , ‘http://www.jb51.net‘ ) ;

此方法能在所有的现代浏览器中正常工作,但它不是HTML 5 的自定义 data-*属性被使用目的,不然和我们以前使用的自定义属性就没有什么区别了,例如:

复制代码

代码如下:

<div id = "user" uid = "12345" uname = "脚本之家" > </div>
<script>
// 使用getAttribute获取 data- 属性
var user = document . getElementById ( ‘user‘ ) ;
var userName = plant . getAttribute ( ‘uname‘ ) ; // userName = ‘脚本之家‘
var userId = plant . getAttribute ( ‘uid‘ ) ; // userId = ‘12345‘

// 使用setAttribute设置 data- 属性
user . setAttribute ( ‘site‘ , ‘http://www.jb51.net‘ ) ;
</script>

这种“原始”的自定义属性和上面 data-* 自定义属性没什么区别,知识属性名不一样。

dataset属性存取data-*自定义属性的值

这种方式通过访问一个元素的 dataset 属性来存取 data-* 自定义属性的值。这个 dataset 属性是HTML5 JavaScript API的一部分,用来返回一个所有选择元素 data- 属性的DOMStringMap对象。

使用这种方法时,不是使用完整的属性名,如 data-uid 来存取数据,应该去掉data- 前缀。

还有一点特别注意的是: data- 属性名如果包含了连字符,例如:data-date-of-birth ,连字符将被去掉,并转换为驼峰式的命名,前面的属性名转换后应该是: dateOfBirth 。

复制代码

代码如下:

<div id="user" data-id="1234567890" data-name="脚本之家" data-date-of-birth>码头</div>
<script type="text/javascript">
var el = document.querySelector(‘#user‘);
console.log(el.id); // ‘user‘
console.log(el.dataset);//一个DOMStringMap
console.log(el.dataset.id); // ‘1234567890‘
console.log(el.dataset.name); // ‘脚本之家‘
console.log(el.dataset.dateOfBirth); // ‘‘
el.dataset.dateOfBirth = ‘1985-01-05‘; // 设置data-date-of-birth的值.
console.log(‘someDataAttr‘ in el.dataset);//false
el.dataset.someDataAttr = ‘mydata‘;
console.log(‘someDataAttr‘ in el.dataset);//true
</script>

如果你想删掉一个 data-属性 ,可以这么做: delete el . dataset . id ; 或者 el .dataset . id = null ; 。

看起来很美,哈哈,但是不幸的是,新的 dataset 属性只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+浏览器中实现,所以在此期间最好用的getAttribute和setAttribute来操作。

关于data-属性选择器

在实际开发时,您可能会发现它很有用,你可以根据自定义的 data- 属性选择相关的元素。例如使用querySelectorAll选择元素:

复制代码

代码如下:

// 选择所有包含 ‘data-flowering‘ 属性的元素
document . querySelectorAll ( ‘[data-flowering]‘ ) ;

// 选择所有包含 ‘data-text-colour‘ 属性值为red的元素
document . querySelectorAll ( ‘[data-text-colour="red"]‘ ) ;

同样的我们也可以通过 data- 属性值对相应的元素设置CSS样式,例如下面这个例子:

复制代码

代码如下:

<style type ="text/css">
.user {
width : 256px ;
height : 200px ;
}

.user[data-name=‘feiwen‘] {
color : brown
}

.user[data-name=‘css‘] {
color : red
}
</style>
<div class = "user" data-id = "123" data-name = "feiwen" > 1 </div>
<div class = "user" data-id = "124" data-name = "css" > 码头 </div>

转:http://www.jb51.net/html5/152511.html

时间: 2024-11-10 07:51:23

HTML5的自定义属性data-*详细介绍和JS操作实例的相关文章

chart.js操作实例(前后台互通)

前提:需要导入chart.js 我的项目环境是:SpringMVC+mongodb SpringMVC的controller层: /** * 查询得到财务信息报表 * @author liupeng * @param request * @return * @throws UnknownHostException * @throws ParseException */ @RequestMapping(value="/innerChartOutForFinal") public Mode

详细介绍Flex中操作XML

一  在介绍Flex中操作XML之前,首先简单介绍下XML中的基本术语. 元素:XML中拥有开始标签和结束标签的这一块称为“元素”    节点:把XML元素与文本结合起来统称为节点    根节点:位于整个XML文当顶端的节点    文本节点:包含文本的节点    属性:元素的组成部分,以键/值形式放在元素标签内 用一个例子来说明 <root_node><!--这是一个根节点也是一个元素--> <node attribute="value"><!

Django框架详细介绍---ORM相关操作---select_related和prefetch_related函数对 QuerySet 查询的优化

Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化 引言 在数据库存在外键的其情况下,使用select_related()和prefetch_related()很大程度上减少对数据库的请求次数以提高性能 1.实例准备 模型: from django.db import models # Create your models here. # 书 class Book(models.Model): title = models.C

doT.js详细介绍

doT.js详细介绍 doT.js特点是快,小,无依赖其他插件. 官网:http://olado.github.iodoT.js详细使用介绍 使用方法:{{= }} for interpolation{{ }} for evaluation{{~ }} for array iteration{{? }} for conditionals{{! }} for interpolation with encoding{{# }} for compile-time evaluation/includes

js中的json对象详细介绍

JSON一种简单的数据格式,比xml更轻巧,在JavaScript中处理JSON数据不需要任何特殊的API或工具包,下面为大家详细介绍下js中的json对象, 1.JSON(JavaScript Object Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包. JSON的规则很简单:对象是一个无序的“‘名称:值'对”集合.一个对象以“{”(左括号)开始,“}”(右括号)结束

分步引导中,Js操作Cookie,实现判断用户是否第一次登陆网站

上一篇介绍了分布引导插件IntroJs的使用,本篇介绍通过Js操作cookie的方法. 分步引导的功能只适合与第一次登陆网站的新用户,不能每次登陆都提示分布引导,那么如何判断用户是否第一次登录网站呢? 通过Js操作浏览器Cookie,方法有很多种,大多数是通过js获取到cookie存储的键值对,然后找到需要的哪一个键,在判断值,但是这种方案比较繁琐,现在给出一种新的想法.手动设置一个字段到cookie中,这样每次只判断是否有这个字段即可.代码如下: 1 <script type="text

HTML5统计图表amCharts JavaScript 统计图控件详细介绍

amCharts控件提供您最需要的JavaScript/HTML5图表.一套包括串行(列,栏,线,区,步线,平滑线,烛台,OHLC图),馅饼 /甜甜圈,雷达/极性和XY /分散/气泡图.amCharts的图表提供了无与伦比的功能和性能,在一个高级的,符合标准的包里. 支持所有高级浏览器 amCharts的JavaScript图表支持所有高级浏览器(包括但不限于)现代火狐,Chrome,Safari,Opera和Internet Explorer的版本.它的iPad,iPhone,iPod Tou

HTML5系列四(特征检测、Modernizr.js的相关介绍)

Modernizr:一个HTML5特征检测库 Modernizr帮助我们检测浏览器是否实现了某个特征,如果实现了那么开发人员就可以充分利用这个特征做一些工作 Modernizr是自动运行的,无须调用诸如modernizr_init()之类的初始化方法 Modernizr的官网地址http://modernizr.com/ 在官网首页你就可以下载modernizr.js(它分两个版本Development和Production版本.其实它们都会导向同一个下载页面,只不过前者会帮我们把选项预先勾上而

HTML5中&lt;template&gt;标签的详细介绍

HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是“模板元素”. 目前,我们在HTML中嵌入模板HTML,往往是类似这样的写法: 1 2 3 <script type="text/template"> /