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 在背景上应用颜色的属性：

  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屋！