Question

我有div喜欢

<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>

在这里，我想通过data-value或类似的方式获取document.getElementById('first').value中的值..

如何获得此值或是否有类似的方法

Answer 1

使用.attr()或.getAttribute()。那会有用。

jQuery解决方案

$(function(){
  console.log($('#first').attr('data-value'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>

JavaScript解决方案

function Example(){
  console.log(document.getElementById('first').getAttribute("data-value")); 
}
Example();

<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>

Answer 2

jQuery具有data()方法。考虑使用它：

// To get/read the value
$("#first").data("value")
// To set the value
$("#first").data("value", "foo-bar")

文档：

返回指定数据存储区中第一个元素的值 jQuery集合，由data(name, value)或HTML5 data-*设置属性。

Answer 3

您可以将其视为普通属性，并按如下方式使用普通javascript：

document.getElementById("first").getAttribute('data-value');

由于属性命名遵循data-命名约定，我们可以使用HTML5数据规范。

在普通javascript中，您使用数据集 API：

document.getElementById("first").dataset.value;

但是，jQuery为此提供了一个很好的快捷方式：

$("#first").data("value");

Answer 4

我发现使用.val（）在这里效果很好

要设置： $("#div").val(1); //将div的值设置为1

要检索： let foo = $("#div").val(); //检索“ 1”

Answer 5

使用getAttribute（）方法。

在你的情况下 -

document.getElementById('first').getAttribute('data-value')

可在此处找到文档： http://www.w3schools.com/jsref/met_element_getattribute.asp

HTML将值存储到div中并获取其值

5 个答案: