浅谈HTML5的新特性——data-*自定义属性
2017-03-06 11:16
459 查看
HTML5增加了一个新特性——data-*自定义属性。
可以往HTML标签上添加任意以 "data-"开头的属性,这些属性在页面上是不显示的,即不会影响到页面布局和风格,但它却是可读可写的。
使用data-*自定义属性可以解决自定义属性混乱无管理的现状。
1、getAttribute()和setAttribute()方法存取传统的自定义属性的值
2、getAttribute()和setAttribute()方法存取data-*自定义属性的值
getAttribute()和setAttribute()方法能在所有浏览器中正常工作,和传统的自定义属性没有什么区别,只是属性名不一样,没有体现HTML
5的data-*自定义属性的真正目的。
3、dataset属性存取data-*自定义属性的值
dataset属性是HTML5 JavaScript API的一部分,用来返回一个包含选择元素的所有data-*属性的DOMStringMap对象。
使用dataset属性时,不使用完整的属性名,应该去掉data-前缀,如 data-age属性名转换后应该是age。
data-属性名如果包含了连字符,去掉data-前缀后需要转换为驼峰式命名,如data-date-of-birth属性名转换后应该是dateOfBirth 。
然而,新的dataset属性只在Chrome 8+、Firefox(Gecko) 6.0+、IE 11+、Opera 11.10+、Safari 6+中实现,所以最好还是getAttribute()和setAttribute()来操作。
4、data-*属性选择器
(1)jQuery属性选择器:
(2)CSS属性选择器:
可以往HTML标签上添加任意以 "data-"开头的属性,这些属性在页面上是不显示的,即不会影响到页面布局和风格,但它却是可读可写的。
使用data-*自定义属性可以解决自定义属性混乱无管理的现状。
1、getAttribute()和setAttribute()方法存取传统的自定义属性的值
var username = document.getElementById('username'); // 使用setAttribute设置自定义属性 username.setAttribute ('blog', 'http://blog.csdn.net/zhouziyu2011'); // 使用getAttribute获取自定义属性: alert(username.getAttribute('age')); // 输出:23 alert(username.getAttribute('blog')) ; // 输出:http://blog.csdn.net/zhouziyu2011
2、getAttribute()和setAttribute()方法存取data-*自定义属性的值
<input id="username" data-age="23">
var username = document.getElementById('username'); // 使用setAttribute设置 data- 属性 username.setAttribute ('data-blog', 'http://blog.csdn.net/zhouziyu2011'); // 使用getAttribute获取data-*属性: alert(username.getAttribute('data-age')); // 输出:23 alert(username.getAttribute('data-blog')) ; // 输出:http://blog.csdn.net/zhouziyu2011
getAttribute()和setAttribute()方法能在所有浏览器中正常工作,和传统的自定义属性没有什么区别,只是属性名不一样,没有体现HTML
5的data-*自定义属性的真正目的。
3、dataset属性存取data-*自定义属性的值
dataset属性是HTML5 JavaScript API的一部分,用来返回一个包含选择元素的所有data-*属性的DOMStringMap对象。
使用dataset属性时,不使用完整的属性名,应该去掉data-前缀,如 data-age属性名转换后应该是age。
data-属性名如果包含了连字符,去掉data-前缀后需要转换为驼峰式命名,如data-date-of-birth属性名转换后应该是dateOfBirth 。
var username = document.getElementById('username'); // 使用dataset设置 data- 属性 username.dataset.dateOfBirth = '1993-12-06'; // 使用dataset获取data-*属性: alert(username.dataset.age) ; // 输出:23 alert(username.dataset.dateOfBirth) ; // 输出:1993-12-06
然而,新的dataset属性只在Chrome 8+、Firefox(Gecko) 6.0+、IE 11+、Opera 11.10+、Safari 6+中实现,所以最好还是getAttribute()和setAttribute()来操作。
4、data-*属性选择器
(1)jQuery属性选择器:
$("input[data-age]").css("background","red");
(2)CSS属性选择器:
input[data-age] { background:red; }
相关文章推荐
- html5新特性data_*自定义属性使用(转)
- html5新特性data_*自定义属性使用
- HTML5新特性:自定义数据属性data-*
- HTML5新特性data_*自定义属性使用
- HTML5之新特性(选择器、class列表属性、JSON新方法、data自定义数据、延迟加载JS)
- HTML5新特性: 自定义属性前缀data-以及dataset的使用
- html5的自定义data-*属性
- HTML5自定义属性对象Dataset简介(data-xxx)
- HTML5 data-* 自定义属性
- HTML5 自定义属性 data-* 和 jQuery.data 详解
- html5自定义的 data属性
- html5的自定义data-*属性与jquery的data()方法的使用
- jQuery中使用data()方法读取HTML5自定义属性data-*实例
- HTML5 自定义属性 data-* 和 jQuery.data 详解
- ajax利用html5新特性带进度条上传文件 html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法
- HTML5的自定义属性data-* 的用法解析
- jQuery中使用data()方法读取HTML5自定义属性data-*实例
- html5-自定义元素属性data-和content的attr用法
- HTML5--表单新特性使用自定义错误提示消息validity属性
- HTML5 自定义属性 data-* 和 jQuery.data 详解