代码之家  ›  专栏  ›  技术社区  ›  harunB10

使用javascript从HTML链接访问数据[重复]

  •  0
  • harunB10  · 技术社区  · 6 年前

    我有下一个HTML:

    <span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>
    

    是否可以获取以 data- ,并将其用于 javascript 下面是类似代码的代码?现在我明白了 null 结果。

    document.getElementById("the-span").addEventListener("click", function(){
        var json = JSON.stringify({
            id: parseInt(this.typeId),
            subject: this.datatype,
            points: parseInt(this.points),
            user: "H. Pauwelyn"
        });
    });
    
    0 回复  |  直到 6 年前
        1
  •  101
  •   Josh Crozier HBP    9 年前

    您需要访问 dataset property :

    document.getElementById("the-span").addEventListener("click", function() {
      var json = JSON.stringify({
        id: parseInt(this.dataset.typeid),
        subject: this.dataset.type,
        points: parseInt(this.dataset.points),
        user: "Luïs"
      });
    });
    

    结果:

    // json would equal:
    { "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }
    
        2
  •  79
  •   MarkPlewis    9 年前

    因为 dataset 在版本11之前,Internet Explorer不支持属性,您可能需要使用 getAttribute() 相反:

    document.getElementById("the-span").addEventListener("click", function(){
      console.log(this.getAttribute('data-type'));
    });
    

    Dataset documentation

    getAttribute documentation

        3
  •  11
  •   meskobalazs    9 年前

    您可以访问它作为

    element.dataset.points
    

    在这种情况下: this.dataset.points

        4
  •  3
  •   Basheer AL-MOMANI    6 年前

    如果您的目标是HTML元素中的数据属性,

    document.dataset 不起作用

    你应该使用

    document.querySelector("html").dataset.pbUserId
    

    document.getElementsByTagName("html")[0].dataset.pbUserId
    
        5
  •  -9
  •   H. Pauwelyn    9 年前

    尝试此操作而不是您的代码:

    var type=$("#the-span").attr("data-type");
    alert(type);