Question

html <a></a>标记中的href和data-href属性有什么区别？我目前的代码如下：

<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页面。

Answer 1

全局HTML 数据 - * 属性用于存储自定义数据（可以通过CSS和Javascript调用）。 *是一个可以被任何字幕替换的通配符。

在下一个代码段中，CSS使用data-append中存储的数据附加文本:after div的内容，而Javascript使用data-color属性中存储的数据在背景上应用颜色：

＆＃13;

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;

＆＃13;

div::after {
  content: attr(data-append);
}

＆＃13;

<div data-append="_SUCCESS_" data-color="lawngreen"></div>
<div data-append="_FAILURE_" data-color="tomato"></div>

＆＃13;

Answer 2

html标签中的href和data-href属性有什么区别？

前者实际上链接到某个地方，包含所有功能/ UI（因为它是指定的作为完成它的属性） - 而后者本身什么都不做，它只是一个任意命名的自定义数据属性，具有任意值。

编辑：有关自定义数据属性的更多信息：

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

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

html中锚点标记中的href和data-href之间的差异

2 个答案: