HTML5的自定义属性的使用总结

以前我们需要自定义属性的时候一般是这样做的,在标签里面加上我们自己设置的一些属性:

<div id="myDiv" user-defined-attribute="value">在标签里设置自定义属性</div>

然后获取里面的值是使用getAttribute来获取自定义属性里面的值:

var myDiv = document.getElementById("myDiv");

var theValue = myDiv.getAttribute("user-defined-attribute");

现在H5为我们提供了一个data属性——“data-”前缀,可以让所有的HTML元素支持自定义属性,只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

这个data属性还可以应用在CSS中,前提是你的浏览器支持after伪类,以及content的attr属性(低版本的IE不支持):

<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>

#myDiv{
position: ralative;
}

#myDiv:hover:after{
position: absolute;
top: 0px;
left: 0px;
content: attr(data-attribute);
color: red;
}

如何获取data属性的值?

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>
一、使用getAttribute来获取

var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");

二、使用Html5自定义属性对象Dataset来获取

var myDiv = document.getElementById("myDiv");

var theValue = myDiv.dataset.attribute;

注意:带连字符连接的名称在使用的时候需要命名驼峰化,即大小写组合书写,这与应用元素的style对象类似,dom.style.borderColor。例如data属性为data-other-attribute,则我们要获取相应的值可以使用:myDiv.dataset.otherAttribute

如果Html元素定义了多个自定义属性,如何获取?

<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>

一、使用循环遍历

var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;
for (i = 0, j = attrs.length; i < j; i++) {
if(attrs[i].name.substring(0, 5) == ‘data-‘) {
expense[attrs[i].name.substring(5)] = attrs[i].value;
}
}

二、使用dataset属性

var expense = document.getElementById(‘myDiv‘).dataset;

注:dataset并不是典型意义上的JavaScript对象,而是个DOMStringMap对象,DOMStringMap是HTML5一种新的含有多个名-值对的交互变量

1、让所有的自定义的属性值塞到一个数组中

var chartInput = [];

for (var item in expense) {
chartInput.push(expense[item]);
}

2、删掉一个data属性

delete myDiv.dataset.attribute;

3、增加一个data属性

myDiv.dataset.attribute4 = ‘value4‘;

dataset的兼容性处理

如果浏览器不支持dataset,有必要做一下兼容处理:

if(myDiv.dataset) {
myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
var theValue = myDiv.dataset.attribute; // 获取自定义属性
} else {
myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
}

结语:

使用dataset操作data 要比使用getAttribute速度稍微慢些,虽然使用dataset不能提高代码的性能,但是对于简洁代码,提高代码的可读性和可维护性是很有帮助的。

原文地址:https://www.cnblogs.com/xywl/p/10325395.html

时间: 2024-10-13 13:29:07

HTML5的自定义属性的使用总结的相关文章

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

当然高级浏览器下可通过脚本进行定义和数据存取.在项目实践中非常有用. 例如: 复制代码 代码如下: <div id = "user" data-uid = "12345" data-uname = "脚本之家" > </div> 使用attribute方法存取 data-* 自定义属性的值 使用attributes方法存取 data-* 自定义属性的值非常方便: 复制代码 代码如下: // 使用getAttribute获取

Html5之自定义属性(data-,dataset)

定义H5为我们提供了以 "data-" 为前缀定义需要的属性即可设置自定义属性12<div id="box1" data-name="Musk"></div><div id="box2" data-full-name="Elon Musk"></div>获取使用H5自定义属性对象dataset来获取12345678let box1 = document.get

html5 + css3 + jQuery + 响应式布局设计

1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN"><head><meta charset="utf-8" /><title>html5 - 新增属性与技术总结 - by sole</title><meta name="keywords" content="html

学习前端第二天心得体会(初步了解HTML5的部分API以及画布Canvas)

一.HTML5部分API 1.选择器querySelector和querySelectorAll 1.1.querySelector:返回文档中匹配指定的CSS选择器的第一元素.  document.querySelector(CSS selectors),CSS selectors(指定一个或多个匹配元素的 CSS 选择器. 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素. 对于多个选择器,使用逗号隔开,返回一个匹配的元素). 1.2.querySelectorAll : H

Thymeleaf3.0简介

thymeleaf的初次使用(带参请求以及调用带参js方法) 之前对于前端框架接触较少,第一次接触thymeleaf,虽说看起来并不复杂但我还是花费了好一会儿才弄懂. 话不多少下面就简单说一下我在项目中的应用. 首先是java代码 controller层 将需要在前端展示的信息放入model中: @RequestMapping("getAll") public String getAll(Model model){ List<ScheduleJob> list = sche

JS学习笔记5_DOM

1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性值 关系属性:parentNode,childNodes,nextSibling,previousSibling,firstChild,lastChild ownerDocument:文档节点(document对象) 2.操作DOM节点(增/删/改) appendChild(node);给当前节点的

前端进阶之路:点击事件绑定

网址:http://web.jobbole.com/83591/ 背景 我是一个前端小兵,我在一家互联网公司做做一些简单的业务开发. 某一天,我接到了一个需求,做一个抽奖功能.公司里的前辈们已经完成了业务逻辑,而且已经提供了业务功能的接口,只需要我制作页面并完成事件绑定即可. 我写好了页面,页面中有一个 ID 为 lucky-draw 的按钮元素.接下来,我需要为它绑定点击事件.我是这样写的: var btn = document.getElementById('lucky-draw') btn

HTML DOM元素的Dragdrop

在前端web页面中,为了提高用户体验,通常会希望将页面中的元素设计成可dragdop的,简化用户操作.这一设计特性在缺少鼠标的触摸屏设备上,显得更为重要. 在早期的应用中,我们通常需要借助第三方的javascript库(Jquery插件等).在HTML5已经将这一特性引入,提供原生的支持,不用再借助第三方的javascript库.现代化的程序设计中,各种前端库的引入(Jquery, nodejs, ract, angularjs),提高了开发效率,而各自的库也有相应的插件来处理dragdrop,

CSS3各个模块详解

一, CSS3 盒子 阴影 属性 box- shadow 也是 CSS3 新增 的 一个 重要 属性, 用来 定义 元素 的 盒子 阴影. inset: 阴影 类型, 可选 值. 如果不 设置, 其 默认 的 投影 方式 是 外 阴影: 如果 取其 唯一 值" inset", 就是 给 元素 设置 内 阴影. x- offset: 阴影水平偏移量, 其值可以是正负值. 如果取正值, 则 阴影 在 元素 的 右边, 反之 取 负值, 阴影 在 元素 的 左边. y- offset: 阴影