--- title: data-* slug: Web/HTML/Global_attributes/data-* tags: - Global attributes - HTML translation_of: Web/HTML/Global_attributes/data-* --- <p>{{HTMLSidebar("Global_attributes")}}</p> <p><strong>data-*</strong> <a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a> 是一类被称为<strong>自定义数据属性</strong>的属性,它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力,并可以通过脚本在 <a href="/zh-CN/docs/Web/HTML" title="zh/HTML">HTML</a> 与 <a href="/zh-CN/docs/Web/API/Document_Object_Model" title="en/DOM">DOM</a> 表现之间进行专有数据的交换。</p> <div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}</div> <p>所有这些自定义数据属性都可以通过所属元素的 {{domxref("HTMLElement")}} 接口来访问。 {{domxref("HTMLElement.dataset")}} 属性可以访问它们。 <code>*</code> 可以使用遵循 <a class="external" href="http://www.w3.org/TR/REC-xml/#NT-Name" title="http://www.w3.org/TR/REC-xml/#NT-Name">xml名称生产规则</a> 的任何名称来被替换,并具有以下限制:</p> <ul> <li>该名称不能以<code>xml</code>开头,无论这些字母是大写还是小写;</li> <li>该名称不能包含任何分号 (<code>U+003A</code>);</li> <li>该名称不能包含A至Z的大写字母。</li> </ul> <p>注意,{{domxref("HTMLElement.dataset")}} 属性是一个{{domxref("DOMStringMap")}},并且自定义数据属性 <em> data-test-value</em> 可以通过 <code>HTMLElement.dataset.testValue</code> ( 或者是<code> HTMLElement.dataset["<em>testValue</em>"] </code>) 来访问,任何破折号(<code>U+002D</code>) 都会被下个字母的大写替代(驼峰拼写)。</p> <h3 id="用法">用法</h3> <p>通过添加 <strong>data-*</strong><strong> </strong>属性,即使是普通的 HTML 元素也能变成相当复杂且强大的编程<strong>对象</strong>。例如,在游戏里的太空船 "<a href="https://en.wikipedia.org/wiki/Sprite_%28computer_graphics%29">sprite</a><em>"</em> 可以是一个带有一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/class">class</a> 属性和几个 data-*属性的简单 {{HTMLElement("img")}} 元素:</p> <pre><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></pre> <p id="Specifications">有关使用 HTML 数据属性的更深入的教程,请参阅<a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">使用数据属性</a>。</p> <h2 id="规范">规范</h2> <table class="standard-table"> <tbody> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> <tr> <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> <td>{{Spec2('HTML WHATWG')}}</td> <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> </tr> <tr> <td>{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> <td>{{Spec2('HTML5.1')}}</td> <td>Snapshot of {{SpecName('HTML WHATWG')}} 的快照, no change from {{SpecName('HTML5 W3C')}}</td> </tr> <tr> <td>{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> <td>{{Spec2('HTML5 W3C')}}</td> <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> </tr> </tbody> </table> <h2 id="浏览器兼容性">浏览器兼容性</h2> <p>{{Compat("html.global_attributes.data_attributes")}}</p> <p><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.5rem;'>相关链接</span></p> <ul> <li>所有的<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a></li> <li>{{domxref("HTMLElement.dataset")}} 属性允许访问和修改这些值</li> <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">使用数据属性</a></li> </ul>