JavaScript - 从HTML元素中获取属性的值

Question

我想将'a'字符显示为提示

HTML：

<span id="demo" name="a" onclick="validateForm1id1()"></span>

Javascript：

<script>
    function validateForm1id1() {
        var x = document.getElementById("demo").name;
        alert(x);
    }
</script>

Answer 1

正如@robg在评论中所说：

  

在大多数浏览器中，DOM元素通常仅将标准属性反映为DOM属性（有一些例外）。 name不是span元素的标准属性，因此您需要使用getAttribute

您需要使用getAttribute从name获取span属性。

var x = document.getElementById("demo").getAttribute("name");

Plunker表明它正常运作。

如果您尝试在html元素中存储任意数据，请查看data-*属性。 Docs

  

HTML5在设计时考虑了可扩展性，因为数据应与特定元素相关联，但不必具有任何已定义的含义。 data- *属性允许我们在标准的语义HTML元素上存储额外的信息，而不需要其他的hacks，例如classList，非标准属性，DOM上的额外属性或setUserData。

然后你可以做

HTML：

<span id="demo" data-name="Span name using data-name" onclick="validateForm1id1()">Click me</span>

JS：

function validateForm1id1() {
    var x = document.getElementById("demo").dataset.name;
    alert(x);
}

Plunker显示data-*属性。

Answer 2

尝试以下代码。您需要获取属性“名称”。

function validateForm1id1() {
    var x = document.getElementById("demo").getAttribute('name');
    alert(x);
}