html中锚点标记中的href和data-href之间的差异 [英] Difference between href and data-href in anchor tag in html
问题描述
html < a>< / a>
标记中的href和data-href属性有什么区别?
我当前的代码如下:
< a id =sign_in_with_facebookhref =verify_phone_process_1.html class =btn btn-default bubbla-btn>使用Facebook登录< / a>
当我将其更改为
< a id =sign_in_with_facebookdata-href =verify_phone_process_1.htmlclass =btn btn-default bubbla-btn>使用Facebook登录< / a>
它没有重定向到verify_phone_process_1.html页面。
全局HTML 数据 - * 属性用于存储自定义数据(可以通过CSS和Javascript调用)。
*是一个可以被任何字幕替换的通配符。
在下一个片段中,CSS使用存储在中的数据data-append
附加文本:在
之后的div内容,而Javascript使用 data-color $中存储的数据c $ c>在背景上应用颜色的属性:
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;
< pre class =snippet-code-css lang-css prettyprint-override> div :: after {content:attr(data-append);}
< div data-append =_ SUCCESS_data-color =lawngreen>< / div>< div data-append =_ FAILURE_data-color =tomato >< / div>
What is the difference between href and data-href attribute in html <a></a>
tag?
My current code is written below:
<a id="sign_in_with_facebook" href="verify_phone_process_1.html" class="btn btn-default bubbla-btn">Sign In with Facebook</a>
and when I'm changing it to
<a id="sign_in_with_facebook" data-href="verify_phone_process_1.html" class="btn btn-default bubbla-btn">Sign In with Facebook</a>
it's not redirecting to verify_phone_process_1.html page.
Global HTML data-* attributes are used to store custom data (ready to be called by CSS and Javascript). * is a wildcard that can be substituted by any subtitle.
In the next snippet the CSS uses data stored in data-append
to append text :after
a div's content while Javascript uses the data stored in data-color
attribute to apply color on its 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>
这篇关于html中锚点标记中的href和data-href之间的差异的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!