在HTML标签中添加自定义属性

Question

我正在给我的HTML标签添加自定义属性，类似于：

<li customeId="1">

我需要在IE中访问此自定义属性，但在Firefox中，我无法获取这些属性的值。有没有建议如何在FireFox或其他方式中访问自定义属性。我正在使用HTML 4进行开发。

访问代码：

  var test =  licollection[index].customeId;

谢谢 Ashwani

- Ashwani K

---

你是如何尝试访问这个属性的？请添加代码，这样我们可以看到你在做什么。 - Oded

你没有在使用HTML 4，而是在使用Tag Soup。HTML 4不支持自定义属性。 - Quentin

@David，那么在HTML 4中有没有其他方法将一些属性与标签关联起来？ - Ashwani K

现有属性。包含一些数据的脚本元素（例如 `var foo = { element_id: [1,2,3], other_element: [4,5,6] };）。文本内容。 - Quentin

Answer 1

希望以下代码对你有所帮助。

<div id="navigation">
 <ul>
  <li customerId="1"></li>
  <li customerId="2"></li>
  <li customerId="3"></li>
 </ul>
</div>

var x = document.getElementById('navigation');
if (!x) return;
var liCollections = x.getElementsByTagName('li');
for (var i=0;i<liCollections.length;i++)
   alert(liCollections[i].getAttribute('customerid', 0));

它足够清晰，您可以轻松理解其中的内容。

- MUS

Answer 2

您可以使用HTML 5的自定义数据属性功能，它可能会帮助您。

属性名称

数据属性名称必须至少为一个字符，并且必须以'data-'为前缀。它不应包含任何大写字母。

属性值

属性值可以是任何字符串。

示例：

<ul id="vegetable-seeds">
  <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
  <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
  <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul>

- Gaurav

---

这是很棒的信息。只有几个问题，

如果代码在旧浏览器上运行会发生什么？（没有HTML5兼容性）

'data-<attrib>' 标签有限制吗？

- Pablo Contreras

Answer 3

test.getAttribute('customerid');

你尝试过这个吗？

- vsync

Answer 4

尝试

var test = licollection[index].getAttribute("customeId");

- kennytm

Answer 5

licollection[index].getAttribute("customeId")

参考：http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/getAttributeSyntaxParametersandNote.htm

- mangokun