Differenza tra href e data-href nel tag di ancoraggio in html

Question

Qual è la differenza tra href e attributo data-href in html <a></a> tag? Il mio codice attuale è scritto sotto:

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

e quando sto cambiando a

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

non è il reindirizzamento alla pagina verify_phone_process_1.html.

Answer 1

Qual è la differenza tra l'attributo href e data-href nel tag html?

Che il primo in realtà collega da qualche parte, con tutte le funzionalità/interfaccia utente che comprende (perché è specificato come attributo che compie questo) - mentre il secondo non fa nulla da sola, è solo un arbitrariamente nominato attributo di dati personalizzati con un valore arbitrario.

---

Edit: Qualche informazione in più sui dati di attributi personalizzati:

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 dati- * attributi vengono utilizzati per memorizzare i dati personalizzati (pronto a essere chiamato da CSS e Javascript). * è un carattere jolly che può essere sostituito da qualsiasi sottotitolo.

Nel prossimo frammento di CSS utilizza i dati memorizzati nel data-append per aggiungere testo :after contenuto di un div mentre Javascript utilizza i dati memorizzati in attributi data-color per applicare il colore su suo background:

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>