【问题标题】:Difference between href and data-href in anchor tag in htmlhtml中锚标记中href和data-href之间的区别
【发布时间】:2016-03-15 19:13:52
【问题描述】:

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

【问题讨论】:

    标签: html custom-data-attribute


    【解决方案1】:

    全局 HTML data-* 属性用于在 HTML 代码中存储自定义数据,准备由 CSS 调用(content::before::after 伪元素一起使用) 和 Javascript。 星号 ( * ) 是一个通配符,可以替换为任何字幕。

    在下一个 sn-p 中,CSS 使用存储在 data-append 中的数据来附加文本 :after 一个 div 的内容,而 Javascript 使用存储在 data-color 属性中的数据在其背景上应用颜色: em>

    var div_one = document.getElementsByTagName("div")[0]
    var div_two = document.getElementsByTagName("div")[1];
    
    div_one.style.background = div_one.getAttribute("data-color");
    div_two.style.background = div_two.getAttribute("data-color");
    div::after {
      content: attr(data-append);
    }
    <div data-append="_SUCCESS_" data-color="lawngreen"></div>
    <div data-append="_FAILURE_" data-color="tomato"></div>

    【讨论】:

      【解决方案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

      【讨论】:

      • 您能否建议我任何可以检查这些 html5 数据属性的链接?
      • 我编辑了答案以包含一些链接,请看一下。
      猜你喜欢
      • 2023-04-02
      • 2014-06-13
      • 2015-09-23
      • 2011-03-24
      • 1970-01-01
      • 2012-06-08
      • 2011-04-08
      • 1970-01-01
      • 2019-10-06
      相关资源
      最近更新 更多