web-dev-qa-db-ja.com

HTMLのアンカータグのhrefとdata-hrefの違い

Htmlのhrefとdata-href属性の違いは何ですか<a></a> 鬼ごっこ？私の現在のコードは次のとおりです。

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

verify_phone_process_1.htmlページにリダイレクトしていません。

html5custom-data-attribute
11
Swamy

グローバルHTML data-*属性は、カスタムデータを保存するために使用されます（CSSおよびJavascriptで呼び出す準備ができています）。 *は、任意のサブタイトルで置き換えることができるワイルドカードです。

次のスニペットでは、CSSはdata-appendテキストを追加する:after divのコンテンツ。Javascriptはdata-color背景に色を適用する属性：

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____

HTMLタグのhref属性とdata-href属性の違いは何ですか？

前者は実際にどこかにリンクし、すべての機能/ UIを含む（それを実現する属性としてspecifiedであるため）–後者はそれ自体では何もありません。任意の値を持つ任意の名前のカスタムデータ属性です。

編集：カスタムデータ属性に関する詳細情報：

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