Question

如果我有这样的话：

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

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

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

Answer 1

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

<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或''（似乎在浏览器之间有所不同）。

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

如Matthew所述，自定义属性无效（但通常不会导致任何问题），但如果您使用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");

但我不知道你问题的第二部分。遗憾。

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

4 个答案: