html的非标准属性,关于javascript：HTML标记上的非标准属性。 好东西吗 坏事？ 你的意见？...

当涉及标签上的非标准属性时，HTML(或者可能只是XHTML？)相对严格。如果它们不是规范的一部分，那么您的代码将被视为不符合规范。

但是，非标准属性对于将元数据传递到Javascript可能非常有用。例如，如果假设链接显示弹出窗口，则可以在属性中设置弹出窗口的名称：

popup_title="Title for My Popup">click me

或者，您可以将弹出窗口的标题存储在一个隐藏元素中，例如跨度：

.popup .title { display: none; }

click me

Title for My Popup

但是，我对于应该采用哪种方法感到不满意。第一种方法更简洁，我猜想，它不会像搜索引擎和屏幕阅读器那样费劲。相反，第二个选项使存储大量数据更加容易，因此用途更加广泛。它也符合标准。

我很好奇这些社区的想法。您如何处理这种情况？第一种方法的简单性是否超过潜在的缺点(如果有)？

这些称为" expando"属性-如果您想进一步了解它们。

AFAIK，expando属性是在运行时使用JavaScript设置的。 它们不是XHTML本身的一部分

我是提议的HTML 5解决方案(data-前缀属性)的忠实拥护者。编辑：我想补充一点，可能有更好的示例来使用自定义属性。例如，自定义应用程序将使用的数据在标准属性中没有类似物(例如，基于不一定以className或id表示的内容对事件处理程序进行自定义)。

我现在倾向于遵循此解决方案-即使它不符合标准。

我一直避免这种情况，因为它无法验证。但是，现在我考虑了一下，将class ="属性(如jquery元数据)中的所有内容塞满并不一定会更好。在@Rocketmonkeys我不确定，但是我认为在class属性中使用数据可能会迫使浏览器尝试将未定义的CSS规则应用于元素，这可能会导致某些问题或性能问题。我还是不

@ Vitim.us，如果出现这样的性能下降，则可以忽略不计。浏览器在这种情况下非常有效。实际应用样式的命中率会更高。记住，类并不是出于样式目的而发明的，它们只是元素数据，就像其他任何属性一样。任何属性都可以在选择器中使用，因此，如果出现这样的性能下降，它将直接应用于您添加到元素中的任何属性(包括带前缀data-的属性)。

@eyelidlessness多数民众赞成在一个很好的说法，我必须同意，即使我宁愿在Javascript中正确使用数据结构，我也发现使用data属性是合适的。我避免像Rocketmonkeys所说的那样使用jquery。我真的需要停止对微优化感到困扰。

我同时使用数据属性和自定义实际DOM属性，具体取决于这些属性的用途和用途。对于实际数据，我可以接受数据属性。对于非数据"功能效果"，我使用实际属性。例如：CSS匹配[icon]的使用该图标在::after中应用。图标不符合"数据"的条件。相似：实际的HTML属性"隐藏"被忽略了。我发现CSS类的滥用(icon_hamburger或怪异的示例，例如offset-x-20，其中的值被烘焙到类名中)，我发现这很恐怖。 ;)

自定义属性提供了一种方便的方式来将额外的数据传送到客户端。 Dojo Toolkit会定期执行此操作，并且指出了(揭穿Dojo Toolkit神话)：

Custom attributes have always been

valid HTML, they just don’t validate

when tested against a DTD. [...] The

HTML specification states that any

attribute not recognized is to be

ignored by the HTML rendering engine

in user agents, and Dojo optionally

takes advantage of this to improve

ease of development.

另一个选择是在Javascript中定义以下内容：

var link_titles = {link1:"Title 1", link2:"Title 2"};

然后，您可以稍后在Javascript代码中使用它，假设您的链接具有与该哈希表中的ID相对应的ID。

它没有其他两种方法的缺点：没有非标准属性，也没有丑陋的隐藏范围。

缺点是，对于像您的示例这样简单的事情，它可能有点过大。但是对于更复杂的场景，如果您要传递更多的数据，这是一个不错的选择。特别是考虑到数据是作为JSON传递的，因此您可以轻松传递复杂的对象。

此外，您还可以将数据与格式分开保存，这对于可维护性来说是一件好事。

您甚至可以拥有这样的东西(其他方法实际上无法做到)：

var poi_types = {1:"City", 2:"Restaurant"};

var poi = {1: {lat: X, lng: Y, name:"Beijing", type: 1}, 2: {lat: A, lng: B, name:"Hatsune", type: 2}};

...

Hatsune

并且由于您极有可能使用了某些服务器端编程语言，因此该哈希表应微不足道以动态生成(只需将其序列化为JSON并将其吐到页面的页眉部分)。

为什么不在自定义DTD中声明popup_title属性？这解决了验证问题。我对每个非标准元素，属性和值都执行此操作，感谢此验证向我展示了我的代码中只有真正的问题。这也使得使用此类HTML的任何浏览器错误都不太可能发生。

在这种情况下，最佳解决方案是

click

并使用标题属性。

有时，如果我真的需要，我会破坏规格。但是很少，而且只有正当的理由。

编辑：不确定为什么为-1，但我指出有时您认为需要打破规格，而不必这样做。

您可以在锚元素内嵌套隐藏的输入元素

Link text here

然后，您可以轻松地通过

$('#anchor_id .articleid').val()

是的，但是最好的方法是使用：。因为该类是CSS的东西，所以如果该类不在样式信息中，则实际上给出了无效的代码。即使关闭JS或CSS，数据也将保持隐藏状态。

@ Yeti，class不是CSS的东西，如果它没有出现在样式中也不是无效的。像其他任何属性一样，它只是元素上的数据。与CSS的关联在于它是受支持的选择器。

最后，我的解决方案是将ID数据隐藏在以某种分隔符分隔的id标记中(一个下划线是一个空格，两个是该arg的结尾)，第二个arg有一个id：

click

丑陋的，它假定您尚未将id标记用于其他用途，但它在所有浏览器中均兼容。

我也一直为此绞尽脑汁。我喜欢非标准属性的可读性，但我不喜欢它会破坏标准。隐藏的跨度示例是合规的，但可读性不强。那这个呢：

click

由于JSON的键/值对表示法，因此此处的代码非常易读。您只需看一下就可以知道这是属于链接的元数据。除了劫持" rel"属性外，我唯一看到的缺陷是，对于复杂对象，这会变得混乱。我真的很喜欢上面提到的"数据-"前缀属性的想法。当前的任何浏览器都支持吗？

这是您需要考虑的其他事项。合规代码对SEO有多大影响？

rel属性描述当前页面和链接资源之间的关系。它不是通用的"存储所需的任何数据"属性。所以这太可怕了。

当前的任何浏览器都支持吗？ -有什么要支持的？浏览器已经可以容忍不兼容的代码。考虑到这是新HTML5的一部分，因此不必担心像添加其他自定义属性一样添加data-属性。

在您的示例中，我个人认为跨度路由更合适，因为它符合XHTML规范的标准。但是，我可以看到自定义属性的变化，但是我认为它们增加了不必要的混乱程度。

但是，SPAN路由是对标记的滥用。它可能符合验证标准，但不符合语义标准。