添加自定义属性

时间:2012-07-10 19:52:38

标签: html5 attributes custom-attributes custom-data-attribute

在我正在创建的一个相当复杂的HTML5 webapp中,我发现向一些文档元素添加一些自定义属性很方便。使用jQuery,我发现我可以毫无问题地检索这些属性 - 到目前为止,在Chrome,Safari和Firefox中,我希望也可以在Android / iPhone移动浏览器上。

问题 - 是这样的用法,注入自定义属性,确定或者我会破坏某些内容。为了理解上下文,我使用的是jQuery Mobile,jQuery和一些jQuery插件。

在相关的说明中,我假设可以使用jQuery检索具有指定属性的所有元素吗?

2 个答案:

答案 0 :(得分:5)

我建议您使用数据属性,而不是使用自定义属性,您可以在HTML5 Doctor Website上阅读这些属性。

基本上,您可以为元素提供以data-为前缀的自定义属性,您可以使用jQuery读取/设置这些属性。这是一个例子:

HTML5代码段

<p id="porky" data-food="bacon">Porky was a tasty little piggy</p>

jQuery代码段

alert( $('#porky').data('food') ); // Alerts "bacon"
$('#porky').data('food', 'roast');
alert( $('#porky').data('food') ); // Alerts "roast"

使用数据属性将构成一个有效的,面向未来的应用程序。

答案 1 :(得分:3)

您可以使用data-属性:

<div data-someattr="1" data-someotherattr="'1'" data-obj="{prop:'val1'}" ....

通过jQuery.data()检索那些:

$('div').data('someattr')           //1      Number
$('div').data('someotherattr')      //'1'    String
$('div').data('obj').prop          //'val1' String