👨🏻‍🔬 🔁 😣 有关数据的完整指南* HTML属性 🤵 🤙🏽 🔃

我们提请您注意有关属性使用的文章翻译data-*。这些是可用于在标准HTML元素中方便地存储各种有用信息的属性。该信息尤其可以在JavaScript和CSS中使用。

一般信息

HTML元素可以具有用于解决各种问题的属性-从提供数据到辅助技术再到样式元素。

<!--  `class`      CSS,  `role`    -->
<div class="names" role="region" aria-label="Names"></div>

不建议您创建自己的属性，或以非设计的方式应用现有属性。

<!-- `highlight`   HTML--->
<div highlight="true"></div>

<!-- `large`      `width` -->
<div width="large">

这有很多原因，这很糟糕。HTML错误生成。尽管这可能不会带来真正的负面影响，但由于开发人员创建了有效的HTML代码，因此剥夺了开发人员的热情。但是，您不应该这样做的主要原因是因为HTML是一种不断发展的语言。结果，如果今天的语言中没有使用某个属性，则这并不意味着将来不会有任何改变。

的确，如果某人需要使用此类属性，则他具有完全正常的方式。它是关于创建自己的属性的，这些属性的名称以prefix开头data-。您可以轻松地使用这些属性，并按照程序员的需要来应用它们。

句法

创建自己的HTML属性并将数据写入它们的功能非常有用。如您所知，由于attribute，这是可能的data-*。为此目的是要有这样的属性。看起来像这样：

<!--      -->
<div data-foo></div>

<!-- ...     -->
<div data-size="large"></div>

<!--      HTML,    HTML-, , ,      -->
<li data-prefix="Careful with HTML in here."><li>

<!--   -      -->
<aside data-some-long-attribute-name><aside>

正是由于它们总是以前缀开头，所以这些属性data-通常称为属性data-*或数据属性。形成这些属性的名称时，单词首先出现data，然后是破折号（-），然后是其余的名称（根据开发人员的需要进行排列）。

我可以使用名为data的属性吗？

以下是使用名为的属性的示例代码data：

<div data=""></div>

具有此名称的属性可能不会伤害任何人，但是使用该属性将不允许您使用JavaScript工具，我们将在下面讨论。实际上，在此示例中，开发人员创建了自己的某个属性，如前所述，不建议这样做。

您不应该使用data- *属性

此类属性不应包含辅助技术应可访问的内容。如果某些数据应该在页面上可见，或者可以从屏幕上读取的方式访问，则仅将其放在属性中是不够的data-*。此类数据也应显示在常规HTML标记中。

<!--      ,     -->
<div data-name="Chris Coyier"></div>

<!--      ,       ,    ... -->
<div>
  <span class="visually-hidden">Chris Coyier</span>
</div>

这是有关如何隐藏网页元素的材料。

使用data- *属性样式化元素

在CSS中，您可以根据属性及其值选择 HTML元素。

/*      ,    */
[data-size="large"] {
  padding: 2rem;
  font-size: 125%;
}

/*    , ,  -  */
button[data-type="download"] { }
.card[data-pad="extra"] { }

这似乎很有趣。对于HTML / CSS样式，主要使用类。尽管类是一个很棒的工具（它们在平均平均水平上有所不同，但是您可以通过元素的属性使用便捷的JavaScript方法使用它们classList），但是元素可以具有或不具有特定的类（即，元素中的类是“包含”的），或“关闭”）。当使用属性时data-*，开发人员还具有分类（“ on / off”）的机会，并能够基于具有相同特异性水平的属性值来选择元素。

/*  ,      */
[data-size] { }

/*  ,      */
[data-state="open"],
[aria-expanded="true"] { }

/*  " ",      ,    "3",    -   ,   3 -  "3.14" */
[data-version^="3"] { }
/*  ""   ,      -    */
[data-company*="google"] { }

属性选择器的特异性

属性选择器的特异性与类相同。特异性通常被视为4个部分的值：

内联样式
ID
类和属性
标签

结果，如果您想象仅使用属性选择器进行样式化的项目的专一性值，它将看起来像0, 0, 1, 0。

这是另一个选择器：

div.card[data-foo="bar"] { }

已经通过含义进行了描述0, 0, 2, 1。该数字2出现在这里是因为同时存在一个类（.card）和一个属性([data-foo="bar"]）。而1在这里，由于只存在一个标签（div）。

在这里，为了更清楚起见，这些参数的图解形式。

1个标签，1个类和1个属性

对于属性选择器，特异性低于标识符（ID），但高于标签（元素）。它们的特异性等于类的特异性。

不区分大小写的属性值

如果希望选择器选择其值可能包含使用不同大小写字母组合编写的字符串的属性，则可以使用不区分大小写的选择器选项。

/*     
<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state="open" i] { }

此行为可确保在选择器中使用字符i。

显示存储在data- *属性中的数据

CSS允许您检索属性值data-*并将其显示在页面上。

/* <div data-emoji=":-)"> */

[data-emoji]::before {
  content: attr(data-emoji); /*  ':-)' */
  margin-right: 5px;
}

使用data- *属性设置样式元素的示例

属性data-*可用于指示grid容器应具有多少列。这是HTML代码：

<div data-columns="2">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div data-columns="3">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div data-columns="4">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

这是相关的CSS：

[data-columns] {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  margin: 0 0 1rem 0;
}

[data-columns] > div {
  height: 100px;
  background: white;
}

[data-columns="2"] {
  background: #64B5F6;
  grid-template-columns: repeat(2, 1fr);
}

[data-columns="3"] {
  background: #9CCC65;
  grid-template-columns: repeat(3, 1fr);
}

[data-columns="4"] {
  background: #FFB74D;
  grid-template-columns: repeat(4, 1fr);
}

这是结果页面的一部分。

使用data *属性配置的网格容器，您可以在CodePen上

尝试使用此示例。

使用JavaScript中的data- *属性

data-*可以使用getAtribute读取数据的方法setAttribute和写入的方法来访问属性值，就像其他属性的值一样。

//   
let value = el.getAttribute("data-state");

//   .

//  data-state   "collapsed"
el.setAttribute("data-state", "collapsed");

但是，属性data-*具有自己的特殊API。假设我们有一个带有几个属性的元素data-*（这是完全正常的）：

<span 
  data-info="123" 
  data-index="2" 
  data-prefix="Dr. "
  data-emoji-icon=":-)"
></span>

如果有指向此元素的链接，则可以按以下方式读取和写入其属性的值：

// 
span.dataset.info; // 123
span.dataset.index; // 2

// 
span.dataset.prefix = "Mr. ";
span.dataset.emojiIcon = ";-)";

请注意，JS代码的最后一行使用CamelCase样式属性名称条目。系统会自动将以烤肉串样式编写的HTML属性的名称转换为以骆驼样式编写的名称。那就是-它data-this-little-piggy变成了dataThisLittlePiggy。

这个API，当然是不容易的API 班级列表，支持清晰的方法，例如add，remove，toggle和replace，但它仍然是聊胜于无。

在JavaScript中，您可以使用嵌入元素中的数据集：

<img align="center" src="spaceship.png"
  data-ship-id="324" data-shields="72%"
  onclick="pewpew(this.dataset.shipId)">
</img>
<h2><font color="#3AC1EF">JSON-   data-*</font></h2>
<ul>
  <li data-person='
    {
      "name": "Chris Coyier",
      "job": "Web Person"
    }
  '></li>
</ul>

为什么不将data-*JSON数据写入属性？毕竟，这些只是可以格式化为有效JSON数据（给定引号等）的字符串。如有必要，可以从属性中提取该数据并进行解析。

const el = document.querySelector("li");

let json = el.dataset.person;
let data = JSON.parse(json);

console.log(data.name); // Chris Coyier
console.log(data.job); // Web Person

关于在JavaScript中使用data- *属性

这里的想法是使用属性data-*将数据放置在HTML代码中，可以从JavaScript访问数据以执行某些操作。

此方案的常见实现旨在组织数据库工作。假设我们有一个按钮Like：

<button data-id="435432343">Like</button>

此按钮可能具有单击处理程序，该处理程序执行对服务器的AJAX请求。如果用户使用该按钮喜欢某个东西，则该处理程序会增加服务器数据库中喜欢的次数。处理程序知道需要更新哪个特定记录，因为该处理程序从属性中获取有关此信息的信息data-*。

摘要

这里，这里和这里是与属性选择器相关的标准data-*。在 Caniuse网站上，您可以了解data-*浏览器对属性的支持。如果您以前没有使用过这些属性，我们希望该材料能给您带来思考。

亲爱的读者们！您如何使用data- * HTML属性？

有关数据的完整指南* HTML属性