Unterschied zwischen href und data-href in anchor-Tag in html

Question

Was ist der Unterschied zwischen href und Data-href-Attribut in html <a></a> Tag? Mein aktueller Code geschrieben unter:

<a id="sign_in_with_facebook" href="verify_phone_process_1.html" class="btn btn-default bubbla-btn">Sign In with Facebook</a> 

und wenn ich es

Wechsel bin

<a id="sign_in_with_facebook" data-href="verify_phone_process_1.html" class="btn btn-default bubbla-btn">Sign In with Facebook</a> 

Umleiten es nicht Seite verify_phone_process_1.html.

Answer 1

Was ist der Unterschied zwischen href und Data-href-Attribut in HTML-Tag?

Dass die ehemalige tatsächlich irgendwo verbindet, mit allen Funktionen/UI, der folgendes beinhaltet (weil es als Attribut angegeben ist, dass das erreicht) - während letztere tut nichts für sich allein, es ist nur ein willkürlich benannt benutzerdefiniertes Datenattribut mit einem beliebigen Wert

---

Edit: Einige weitere Informationen über benutzerdefinierte Datenattribute:

https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes

http://www.w3.org/TR/html5/dom.html#custom-data-attribute

Answer 2

Globale HTML Daten- * Attribute benutzerdefinierte Daten zu speichern, verwendet werden (bereit von CSS und Javascript aufgerufen werden). * ist ein Platzhalter, der durch einen beliebigen Untertitel ersetzt werden kann.

Im nächsten Schnipsel der CSS-Daten in data-append gespeichert verwendet Text :after ein div Inhalt anhängen, während Javascript verwendet die in data-color Attribut gespeicherten Daten Farbe auf dem Hintergrund anzuwenden:

var zzz = document.getElementsByTagName("div")[0].getAttribute("data-color"); 
 
var yyy = document.getElementsByTagName("div")[1].getAttribute("data-color"); 
 

 
document.getElementsByTagName("div")[0].style.background = zzz; 
 
document.getElementsByTagName("div")[1].style.background = yyy;

div::after { 
 
    content: attr(data-append); 
 
}

<div data-append="_SUCCESS_" data-color="lawngreen"></div> 
 
<div data-append="_FAILURE_" data-color="tomato"></div>