Question

将相关信息存储在HTML代码中是不是很好？

$("#my_div").append("<span id='info' boo='foo'/>");
$("#info").attr("boo");

我在TAL（ZPT）中遇到过这种技术（稍微借用它），您可以使用tal:attributes语句来修改HTML标记（例如从后端传递boo变量的值，以作为属性值在最终文档中呈现）：

<span id='info' tal:attributes='boo view/boo'>

结果：

<span id='info' boo='foo'>

这种技术有一天会破坏文档，还是规范安全？

Answer 1

正确的方法是使用data- *属性：

http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes

在切换方面，jQuery也有一种特殊的方法来处理这些问题。例如：

<p id='string' data-user_name='thedude'></p>
$('#string').data('user_name') => "thedude"
typeof $('#string').data('name') => "string"

<p id='number' data-user_id='12345'</p>
typeof $('#number').data('user_id') => "number"

<p id='boolean' data-user_is_active='true'></p>
typeof $('#boolean').data('user_is_active') => "boolean"

<p id = 'json' data-user='{"name": "the dude", "id": "12345"}'></p>
typeof $('#json').data('user') => "object"
// embedding JSON is extremely useful in my experience

Answer 2

w3.org允许HTML5在html标记中使用用户自定义数据;

参见以下部分：

3.2.3.9 Embedding custom non-visible data with the data-* attributes

自定义数据属性是没有名称空间的名称空间中的属性以字符串“data-”开头，后面至少有一个字符连字符[...]

示例：

<ol>
 <li data-length="2m11s">Beyond The Sea</li>
 ...
</ol>

所以，我会说这是HTML5的公认惯例。

将HTML标记中的数据存储为自定义属性

2 个答案: