HTML5自定義屬性前綴data-及dataset的使用方法(html5 新特性)
發(fā)布時(shí)間：2017-08-24 16:49:56 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了HTML5自定義屬性前綴data-及dataset的使用方法(html5 新特性),需要的朋友可以參考下
HTML5規(guī)定可以為元素添加非標(biāo)準(zhǔn)的屬性，但要添加前綴 data- ，目的是為元素提供與渲染無(wú)關(guān)的信息，或者提供語(yǔ)義信息。這些屬性可以任意添加、隨便命名，只要以 data- 開(kāi)頭即可添加了自定義屬性之后，可以通過(guò)元素的 dataset 屬性來(lái)訪問(wèn)自定義屬性的值。
<div id="box" data-name='ghostwu' data-age='22' , data-sex='man'>ghostwu tell you how to learn html5</div>
<script>
var oBox = document.querySelector("#box");
console.log( oBox.dataset ) ;
var myName = oBox.dataset.name;
var myAge = oBox.dataset.age;
var mySex = oBox.dataset.sex;
if( oBox.dataset.name ) {
console.log( oBox.dataset.name );
}
</script>
總結(jié)
以上所述是小編給大家介紹的HTML5自定義屬性前綴data及dataset的使用方法(html5 新特性)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了詳解HTML5 data-* 自定義屬性的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-24全面解析HTML5中的標(biāo)準(zhǔn)屬性與自定義屬性
這篇文章主要介紹了HTML5中的標(biāo)準(zhǔn)屬性與自定義屬性,文中也談到了JavaScript操作DOM時(shí)訪問(wèn)自定義屬性的一些相關(guān)知識(shí)點(diǎn),非常推薦,需要的朋友可以參考下2016-02-18html5的自定義data-*屬性與jquery的data()方法的使用
在HTML5規(guī)范里增加了一個(gè)自定義data屬性，你可以拿它做很多有用的事情，下面為大家介紹下HTML5的自定義data-* 屬性和jquery的data()方法的使用，感興趣的朋友不要錯(cuò)過(guò)2014-07-02HTML5的自定義屬性data-*詳細(xì)介紹和JS操作實(shí)例
HTML5 增加了一項(xiàng)新功能是 自定義數(shù)據(jù)屬性 ，也就是 data-* 自定義屬性。在HTML5中我們可以使用以 data- 為前綴來(lái)設(shè)置我們需要的自定義屬性，來(lái)進(jìn)行一些數(shù)據(jù)的存放2014-04-10HTML5自定義data-* data(obj)屬性和jquery的data()方法的使用
可能大家在使用jquery mobile時(shí)，經(jīng)常會(huì)看到data-role、data-theme等的使用，這些都是HTML5自定義屬性,本文整理一些，需要的朋友可以參考下2012-12-13- 這篇文章主要介紹了HTML5自定義屬性的問(wèn)題分析,需要的朋友可以參考下2019-08-16
