web-dev-qa-db-fra.com

Différence entre href et data-href dans la balise d'ancrage en html

Quelle est la différence entre l'attribut href et l'attribut data-href dans html <a></a> tag? Mon code actuel est écrit ci-dessous:

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

et quand je le change en

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

il ne redirige pas vers la page verify_phone_process_1.html.

html5custom-data-attribute
11
Swamy

Les attributs HTML globaux data - * sont utilisés pour stocker des données personnalisées (prêtes à être appelées par CSS et Javascript). * est un caractère générique qui peut être remplacé par n'importe quel sous-titre.

Dans l'extrait suivant, le CSS utilise des données stockées dans data-append pour ajouter du texte :after le contenu d'une div alors que Javascript utilise les données stockées dans data-color attribut pour appliquer la couleur sur son arrière-plan: 

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>
9
Le____

Quelle est la différence entre l'attribut href et data-href dans la balise html?

Que le premier relie en fait quelque part, avec toutes les fonctionnalités/UI qui incluent (car il est spécifié comme l'attribut qui accomplit cela) - tandis que le second le fait rien en soi, c'est juste un attribut de données personnalisé nommé arbitrairement avec une valeur arbitraire.

Modifier: Quelques informations supplémentaires sur les attributs de données personnalisés:

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

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

6
CBroe