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ページにリダイレクトしていません。
グローバル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>
HTMLタグのhref属性とdata-href属性の違いは何ですか?
前者は実際にどこかにリンクし、すべての機能/ UIを含む(それを実現する属性としてspecifiedであるため)–後者はそれ自体では何もありません。任意の値を持つ任意の名前のカスタムデータ属性です。
編集:カスタムデータ属性に関する詳細情報:
https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes