关于HTML5如何自定义属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于HTML5如何自定义属性相关的知识,希望对你有一定的参考价值。

html5新增自定义属性的特性,在HTML代码中,我们可以在标签上直接定义自定义属性,自定义属性命要以'data-'开头

<p data-hello="这是自定义属性的值">呵呵呵呵</p>

我们可以使用原生JS获取到自定义属性的值

let p = document.querySelector('p')
console.log(p.dataset.hello) //这是自定义属性的值

也可以通过jquery获取自定义属性的值

$('p').data('hello') //这是自定义属性的值

当然,也可以通过传统的方法来获取自定义属性的值

let p = document.querySelector('p')
p.getAttribute('data-hello');
p.setAttribute('data-hello','这是重新赋值')

//jquery
$('p').attr('data-hello')  //获取
$('p').attr('data-hello','设置')  //设置

参考技术A 直接像普通属性一样读写就行了。

关于data自定义属性

新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由JavaScript动态修改,也支持CSS选择器进行样式设置。这使得data属性特别灵活,也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。下面介绍Html5 Dataset 存储的实际应用,以及包括jQuery在内的四种存取方式。

<span id="music-latch" class="musique"

data-date="2013"

data-genre="Electronic"

data-album="Settle (Deluxe)"

data-artist="Disclosure"

data-composer="Howard Lawrence & Guy Lawrence">

Latch (feat. Sam Smith)

</span>

  

利用 getAttribute、setAttribute 存取 dataset

作为HTML元素的标签,dataset的存取也服从getAttribute、setAttribute,而且这两个方法兼容性也最广。

例如对于上面的两个例子,我们可以运行如下代码进行

 

//get

var album = document.getElementById("music-latch").getAttribute("data-album");

console.log(album);

//set

document.getElementById("food-pkd").setAttribute("data-en","Beijing Stuffed Duck");

这样就可以以一种更兼容的方式,来存取dataset数据。所做出的任何更改,都是可以实时反映到元素data属性上的。

但是这种方法比较低端,如果遇到多个data-*自定义字段,想要一次全部获取所有的data属性并包装成对象的话,还必须做一个循环,很麻烦。不过我们还有Dataset API可用。

 

利用 dataset API 存取 dataset

通过.dataset API,我们可以更方便的获取元素的所有data字段,并以对象的方式,方便存取和遍历。例如,对于上面的例子,可以运行

//get

var songd = document.getElementById("music-latch").dataset;

var album = songd.album;

console.log(album);

//set

document.getElementById("food-pkd").dataset.en = "Beijing Stuffed Duck";

//add

document.getElementById("food-pkd").dataset.es = "Pato laqueado a la pekinesa";

利用 jQuery.attr 方法存取 dataset

jQuery有着出色的兼容性。类似get、setAttribute,jQuery的.attr()方法同样可以用在这样的情况下,例如,对于上面的例子,可以运行

 

window.jQuery && (function($){

//get

var album = $("#music-latch").attr("data-album");

console.log(album);

//set

$("#food-pkd").attr("data-en","Beijing Stuffed Duck");

})(window.jQuery);

利用 jQuery.data 方法存取 dataset

jQuery从1.4.2版本开始支持$.data()方法来直接访问data属性,同时也不需要写"data-"关键词了,例如,对于上面的例子,可以运行

 

window.jQuery && (function($){

//get

var album = $("#music-latch").data("album");

console.log(album);

//set

$("#food-pkd").data("en","Beijing Stuffed Duck");

})(window.jQuery);

这样的方法也能出色的存取data属性,但是需要注意,jQuery.data对data数据做出的更改,不会反映到HTML元素data属性上。

也就是说,jQuery现在认为#food-pkd元素的data-en为"Beijing Stuffed Duck",但是在HTML元素上,其值还是没有改变,仍为"Peking Duck":

window.jQuery && (function($){

//set

$("#food-pkd").data("en","Beijing Stuffed Duck");

console.log( $("#food-pkd").data("en") );

// log: "Beijing Stuffed Duck"

})(window.jQuery);



console.log( document.getElementById("food-pkd").dataset.en );

// log: "Peking Duck"

 

jQuery.data 解析 Dataset 的 JSON 信息

事实上,jQuery还可以很聪明的从data里提取出json信息转换为对象:

 

<span id="song-jsn"

data-meta=‘{"name":"Latch", "album":"Disclosure", "date":"2013"}‘>

Latch (feat. Sam Smith)

</span>
window.jQuery && (function($){

var jsn = $("#song-jsn").data("meta");

console.log( jsn.album );

// log: "Disclosure"

})(window.jQuery);

 

以上是关于关于HTML5如何自定义属性的主要内容,如果未能解决你的问题,请参考以下文章

(总结4)HTML5中如何自定义属性

关于data自定义属性

属性html5自定义标签都有哪些

关于H5的自定义属性data-*

HTML5 data-* 自定义属性

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