javascript - 使用 javascript 在 span 元素上获取自定义字段值

Question

如果我有这样的事情：

<span stylecode="123456789" class="punctis-social-widget"></span>

如何使用 javascript（不是 jquery）获取样式代码值。此外，在跨度上使用自定义字段是否有效？

注意：字段样式代码有时不存在，因此函数的结果可能为空。

Answer 1

使用自定义属性是无效的。如果您需要存储任何值，请考虑使用 HTML5data属性。

<span id="item1" data-stylecode="123456789" class="punctis-social-widget"></span>

然后使用 JS 来获取：

<script>
    var element = document.getElementById('item1');  // You could use class
    var sDataValue = element.getAttribute('data-stylecode');  //123456789
</script>

对于 jQuery 获取值：

$('item1').data('stylecode');  //123456789

Answer 2

如果您可以选择 span 元素，您可以简单地执行以下操作：

spanElem.getAttribute('stylecode');

如果该属性不存在，getAttribute()将简单地返回null或 a ''（似乎因浏览器而异）。

如果它有一个 id，选择它会更容易，在这种情况下你可以使用，document.getElementById('id');否则你可以document.getElementsByClassName('punctis-social-widget')在较新的符合标准的浏览器中使用，或者使用document.getElementsByTagName('span');并循环它们并检查它们的 className 属性。

正如 Matthew 所提到的，自定义属性无效（但通常不会导致任何问题 afaik），但如果您使用 HTML 5，将其转换为数据属性将使其有效。

Answer 3

虽然使用这样的自定义属性不是一个好习惯，但您可以这样完成此任务：

var apan = document.getElementsByTagName('span');
var code = span[0].getAttribute('stylecode');
console.log(code);

使用data属性。

Answer 4

我知道如何捕捉属性的值：

var span = document.getElementsByTagName("span");
var stylecode = span.getAttribute("stylecode");

但我不知道你问题的第二部分。对不起。