关于HTML5的data-*自定义属性的总结


Posted in Javascript onMay 05, 2018

本文讲述了关于HTML5的data-*自定义属性。分享给大家供大家参考,具体如下:

一、关于html元素的特性

1.html元素都存在一些标准的特性:

    id 元素在文档中的唯一标识符;

    title 有关元素的附加说明信息,一般通过工具提示条显示出来;

    lang 元素内容的语言代码,很少使用;

    dir 语言的方向,很少使用;

    className,与元素的class特性对应,考虑到与ECMAScript的保留字class的冲突,因此命名为className;

2.操作特性的方法:

    getAttribute() 获取相关特性,也可以获取到自定义的特性,区别于使用DOM元素的属性获取;   

    setAttribute() 设置相关特性; 

    removeAttribute() 删除相关特性;

3.关于获取html元素特性中使用getAttribute()与直接使用DOM元素的属性获取的区别 :

例如:

var header=document.getElementById('header');
console.log(header.id);//header
console.log(header.getAttribute('id'));//header
console.log(header.title);//test
console.log(header.getAttribute('title'));//test
console.log(header.myTitle);//undefined
console.log(header.getAttribute('myTitle'));//monster1935

在本文示例中演示了通过两种方法获取html元素的标准特性以及自定义特性。可以发现:

getAttribute()既可以访问标准特性也可以访问自定义特性,而是用DOM元素本身属性访问html元素特性的时候只能访问标准特性。

原因:

html元素中只有标准特性才会以属性的形式添加到DOM对象中。

特殊情况:

有两类特性,虽有在DOM对象中有对应的属性名,但是属性的值与通过getAttribute()返回的值并不相同。

1.style特性:

使用DOM对象属性访问style的时候,返回的是一个对象,而使用getAttribute()方法获取的时候返回的是css文本。

2.事件处理程序(例如:onclick):

使用DOM对象的属性访问的时候,返回的是一个JavaScript函数,而通过getAttribute()方法获取时返回的是javas代码。

使用方法:

只有在获取自定义特性的时候使用getAttribute()方法,操作DOM的时候,使用对象的属性来获取。

二、Html5中的自定义属性

1.Html5规范中规定自定义属性需要添加前缀data-,目的是提供与渲染无关的信息。

2.使用getAttribute()方法以及setAttribute()方法操作自定义属性。

例如:

var user=document.getElementById('user');
//使用attributes方法操作属性
//获取相关属性值
var name=user.getAttribute('data-name');
console.log(name)//monster1935
var age = user.getAttribute('data-age');
console.log(age);//123
//设置相关属性值
user.setAttribute('data-sex','male');
console.log(user.getAttribute('data-sex'));//male

上述示例中展示了使用getAttribute()以及setAttribute()方法操作html元素的自定义属性。

3.使用dataset操作自定义属性

例如:

var el=document.querySelector('#user');
console.log(el.id);
console.log(el.dataset); //返回的是一个DomStringMap对象
console.log(el.dataset.name);
console.log(el.dataset.age);
// 设置相关属性
el.dataset.home="shandong";
console.log(el.dataset);
// 删除相关属性
// delete el.dataset.home;
el.dataset.home = null;
console.log(el.dataset);

以上示例展示了使用dataset属性来操作自定义属性。dataset属性的值是一个DOMStringMap的一个示例,是一个名值对的映射。在这个映射中,每个data-name的形式的属性都有一个对应的属性,不同的是属性名中没有data-前缀。(比如,自定义属性是data-name,映射中对应的属性就是name).还有一点需要注意的是如果data-属性名中包含了连字符(比如:data-date-of-birth),则映射中对应的属性为dateOfBirth,即转换为相应的驼峰格式来显示。

4.dataset属性的兼容性问题

Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+

5.使用data-属性选择器

1.获取相关DOM元素

var elem=document.querySelectorAll("[data-name='monster1935']");

2.设置相关css样式

<style>
  div{
    width:100px;
    height:200px;
    margin:20px;
  }
  div[data-name="monster"]{
    background-color: green;
  }
  div[data-name="monster1935"]{
    background-color: red
  }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
js中的this的指向问题详解
Aug 29 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 #Javascript
详解js跨域请求的两种方式,支持post请求
May 05 #Javascript
vue 注册组件的使用详解
May 05 #Javascript
Vue三层嵌套路由的示例代码
May 05 #Javascript
动态加载JavaScript文件的3种方式
May 05 #Javascript
Node.js的Koa实现JWT用户认证方法
May 05 #Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 #Javascript
You might like
php基础知识:类与对象(5) static
2006/12/13 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
vue component组件使用方法详解
2017/07/14 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
详解Python中的__init__和__new__
2014/03/12 Python
用python读写excel的方法
2014/11/18 Python
python对url格式解析的方法
2015/05/13 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
python之super的使用小结
2018/08/13 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
语文教学随笔感言
2014/02/18 职场文书
团日活动总结书
2014/05/08 职场文书
小学清明节活动总结
2014/07/04 职场文书
Python使用DFA算法过滤内容敏感词
2022/04/22 Python