Question

说出这样的HTML代码段：

<div a_example = "x" b_example = "y" class = "z"></div>

在Javascript中获取 a_example 和 b_example 的相应属性的正确方法是什么？

xpath可以完成这项工作吗？

Answer 1

使用getAttribute：

var elem = document.getElementsByClassName("z")[0],
    a = elem.getAttribute("a_example");

这是working example。

但是，正如已经提到的那样，您应该使用HTML5 data-*属性，否则您的标记无效。

Answer 2

有些浏览器会将所有属性添加为DOM元素的命名属性，其他浏览器只会添加标准属性。在这两种情况下，您都可以使用getAttribute获取非标准属性，但不建议使用此类方案。

通常使用标准属性和DOM属性，并且只在必要时使用getAttribute，因为它在不同的浏览器中不一致地实现。

Answer 3

您应该查看HTML5数据属性，这是一篇有用的文章：http://html5doctor.com/html5-custom-data-attributes/

从标记中读取数据属性非常简单，旧版浏览器可以使用后备版本。文章中的一个例子：

<div id="sunflower" data-leaves="47" data-plant-height="2.4m"></div>

<script>
// 'Getting' data-attributes using dataset 
var plant = document.getElementById('sunflower');
var leaves = plant.dataset.leaves; // leaves = 47;
</script>

Answer 4

如果您使用的是jQuery，就像说：

一样简单

HTML

<div id="testDiv" a_example = "x" b_example = "y" class = "z"></div>

使用Javascript：

var attr1 = $('#testDiv').attr('a_example');

Answer 5

element.getAttribute(attributename)

这应该适合你。

Answer 6

我同意您应该查看数据属性以及添加非标准属性的更好方法，但这里是您问题的“原始”答案，但我不会将此视为普遍支持（或可取）：

    alert(document.getElementsByTagName('div')[0].getAttribute('b_example'));

如何在Javascript中获取HTML的非DOM属性

6 个答案: