data-属性

data-属性用于放置自定义数据。如果没有其他属性或元素合适放置数据，就可以放在data-属性。

  1. <a href="#" class="tooltip" data-tip="this is the tip!">链接</a>

上面代码中，data-tip用于放置链接的提示文字。

由于data-属性只能通过 CSS 或 JavaScript 利用，所以这里不做详细介绍了。下面是 CSS 的例子。

  1. /* HTML 代码如下
  2. <div data-role="mobile">
  3. Mobile only content
  4. </div>
  5. */
  6. div[data-role="mobile"] {
  7.   display:none;
  8. }
  10. /* HTML 代码如下
  11. <div class="test" data-content="This is the div content">test</div>​
  12. */
  13. .test {
  14.   display: inline-block;
  15. }
  16. .test:after {
  17.   content: attr(data-content);
  18. }