• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • data-*

    版本:HTML5

    一类自定义数据属性,它赋予我们在所有HTML元素上嵌入自定义数据属性的能力,并可以通过脚本(一般指JavaScript)与HTML之间进行专有数据的交换。所有这些自定义数据属性都可以通过所属元素的HTMLElement接口来访问。HTMLElement.dataset属性可以访问它们。

    示例

    <h1>Secret agents</h1>
    
    <ul>
        <li data-id="10784">Jason Walters, 003: Found dead in "A View to a Kill".</li>
        <li data-id="97865">Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in "Goldeneye".</li>
        <li data-id="45732">James Bond, 007: The main man; shaken but not stirred.</li>
    </ul>
    <style>
    .output {
        font: 1rem 'Fira Sans', sans-serif;
    }
    
    h1 {
        margin: 0;
    }
    
    ul {
        margin: 10px 0 0;
    }
    
    li {
        position: relative;
        width: 200px;
        padding-bottom: 10px;
    }
    
    li:after {
        content: 'Data ID: ' attr(data-id);
        position: absolute;
        top: -22px;
        left: 10px;
        background: black;
        color: white;
        padding: 2px;
        border: 1px solid #eee;
        opacity: 0;
        transition: 0.5s opacity;
    }
    
    li:hover:after {
        opacity: 1;
    }
    </style>
    

    Secret agents

    • Jason Walters, 003: Found dead in "A View to a Kill".
    • Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in "Goldeneye".
    • James Bond, 007: The main man; shaken but not stirred.

    所有这些自定义数据属性都可以通过所属元素的HTMLElement接口来访问。HTMLElement.dataset属性可以访问它们。*可以使用遵循xml名称生产规则的任何名称来被替换,并具有以下限制:

    • 该名称不能以xml开头,无论这些字母是大写还是小写;
    • 该名称不能包含任何分号(U+003A);
    • 该名称不能包含A至Z的大写字母。

    注意,HTMLElement.dataset属性是一个DOMStringMap,并且自定义数据属性data-test-value可以通过HTMLElement.dataset.testValue(或者是HTMLElement.dataset["testValue"])来访问,任何破折号(U+002D)都会被下个字母的大写替代(驼峰拼写)。

    用法

    通过添加data-*属性,即使是普通的 HTML 元素也能变成相当复杂且强大的编程对象。例如,在游戏里的太空船"sprite"可以是一个带有一个class属性和几个 data-*属性的简单<img>元素:

    <img class="spaceship cruiserx3" src="shipx3.png"
      data-ship-id="324" data-weapons="laseri laserii" data-shields="72%"
      data-x="414354" data-y="85160" data-z="31940"
      onclick="spaceships[this.dataset.shipid].blasted()">
    </img>
    

    浏览器支持

    所有浏览器都支持data-属性

    上篇:contenteditable

    下篇:itemtype