Question

我试图找出如何获取HTML标记的引用内容。

这是我的HTML：

<div class="html5videoplayer" id="player1" data-files="aGV5IG1hbg=="></div>

我试图获取data-files属性的内容。

主要问题是我不知道如何获取特定属性的内容。我知道我可以使用getElementById()或getElementsByClassName()识别整个班级或ID，但是获取特定属性对我来说是未知的。

如果你有线索我，我会非常感激。谢谢！

Answer 1

在jQuery中使用 data() 函数。

$('#player1').data('files');

在简单的JS中，

var data = document.getElementById('player1').dataset.files;

但是对于像IE8这样的旧浏览器，你无法使用数据集来获取它，

所以你可以使用这个workaroud（如果你不使用jQuery就需要这个，那么只需使用第一个建议。），

var data = document.getElementById('player1').getAttribute('data-files');

Answer 2

您可以使用dataset：

var files = document.querySelector('#player1').dataset.files;

data-*是来自html5的属性，可用于存储元素的特定/特定数据。如果元素上有多个data-*属性，那么它将返回一个包含所有键和值的对象。

Answer 3

在这种情况下，您可以使用jquery attr()函数访问数据文件的内容

$("[data-files]").attr("data-files")

Answer 4

您可以使用JQuery data()函数或attr()函数来获取内容

<div class="html5videoplayer" id="player1" data-files="aGV5IG1hbg=="></div>

<script>
$(document).ready(function(){   
    var result_dataFun = $("#player1").attr("data-files");//Using data() function
    var result_attrFun = $("#player1").data("files"); //Using attr() function
    alert(result_dataFun);
    alert(result_attrFun);
});
</script>

结果：

aGV5IG1hbg==

Answer 5

使用jQuery：

var dataFiles = $('#player1').attr("data-files");

没有jQuery：

var dataFiles = document.getElementById("player1").getAttribute("data-files");

这两个选项可以在任何浏览器中使用！

您可以在this Fiddle尝试这两种方式。

如何获取＆＃34;数据文件的内容＆＃34; HTML标记的属性

5 个答案: