HTML speichern Wert in div und erhalten ihren Wert

Question

Ich habe ein div wie

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

Hier möchte ich wie der Wert in data-value erhalten, indem document.getElementById('first').value oder so etwas wie dies zu tun ..

Wie kann ich Holen Sie sich diesen Wert oder wenn es einen ähnlichen Ansatz gibt

Answer 1

Verwenden Sie die Methode getAttribute().

In Ihrem Fall -

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

Dokumentation finden Sie hier: http://www.w3schools.com/jsref/met_element_getattribute.asp

Answer 2

Verwenden .attr() oder .getAttribute(). Das würde funktionieren.

jQuery Lösung

$(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 Lösung

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

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

Answer 3

Sie können es als ein normales Attribut betrachten und schlicht Javascript wie folgt verwenden:

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

Da das Attribut Benennung der data- Namenskonvention folgt wir die HTML5-Datenspezifikation verwenden können.

Im Klar javascript Sie die Dataset API verwenden:

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

Allerdings bietet jQuery eine nette Abkürzung für diese:

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

Answer 4

jQuery hat die data() Methode. Erwägen Sie es:

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

Docs:

Rückkehr des Wert im Laden namens Daten für das erste Element in der jQuery Sammlung, Set, wie durch data(name, value) oder durch ein HTML5 data-* Attribut.