如何在JavaScript中访问自定义HTML属性？

Question

如何在JavaScript中访问自定义HTML属性？

javascripthtml

6

您好，我在这个HTML文档中遇到了问题，请帮忙解决。

我对此非常陌生。

可能是我错过了什么东西而变得很糊涂。

我只放了有用的资源在这里，请帮助解决问题。

<!DOCTYPE html>
<html>
  <body id="owner_profile">
    <a id="buy" owner="789" token="1000" wrapper="purchase" name="oname">Hurray!</a><br>
    <script>
      document.write("You Have: ");
      document.write(document.getElementById('buy').token);
    </script>  
  </body>
</html>

我希望它显示令牌，但它给出了未定义的结果。 结果是:

耶！

你有: 未定义

- MeAndMySelf

2个回答

1

由于"token"不是有效的HTML属性，您需要使用.getAttribute('token')而不是.token。

<script>
document.write("You Have: ");
document.write(document.getElementById('buy').getAttribute("token"));
</script>

工作中的JSFiddle：http://jsfiddle.net/AvKbn/

- Sean Johnson

1

我会用“自定义”代替“无效”，浏览器可能不知道该怎么处理它，也不会通过W3C验证，但它并不会破坏任何东西。无论如何，我建议使用data-属性来确定有效性。 - Fabrício Matté

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Niet the Dark Absol · Accepted Answer

属性和属性值是有区别的。要获取属性，使用getAttribute("token")方法。

很多预定义的属性与属性值是相互映射的（或者说反之亦然，我不确定）。例如，如果你设置了一个单元格的colSpan属性，那么它的colspan属性也会被影响。

然而，有时两者是非常不同的。最值得注意的是，如果你在文本框中键入内容，其value属性值并不会改变。但是，value属性会发生变化。这意味着你可以使用elem.value = elem.getAttribute("value")来重置文本框的内容。

总的来说，为了避免属性不存在的情况，你应该始终使用get/setAttribute方法来更改元素的属性。

顺便说一句：这些"属性"应该是数据。

<a id="buy" data-owner="789" data-token="1000" data-wrapper="purchase" name="oname">