Question

在您说有大量消息来源解释之前，我告诉您我花时间研究它并仍然对这些内容感到好奇：）

所以，我是网络开发的新手，在过去的几个月里，我在整合HTML/CSS/JS和一些PHP方面积累了很强的技能。但是我用旧学校的“class”和“id”标签写了我所有的标记，选择器等。现在，我看到更现代化的风格，我看到很多使用数据标签的网页。现在的问题是，这些标签能否以任何方式与"class"和"id"相关？如果确实如此，它的核心优势究竟是什么？我需要简单的例子来理解这个概念。是的我知道它的自定义数据属性等等，但是什么使它比其他标签更有用？

非常感谢简单的例子和解释：）

Answer 1

我认为，类和ID具有与data-*属性不同的用途/用途。

例如，一个类有助于描述层次结构。某些类的成员获得某些状态和样式（来自CSS）或不同的行为（例如来自JavaScript）。 ID类似，但它对一个组件是唯一的。因此，虽然有时在描述元素的状态或样式时很有帮助，但它在定位JavaScript中的特定元素时也非常有用。

data-*属性有很多用途。但他们存在的主要目的是他们的名字所暗示的：保存关于元素的数据或信息。元素没有很多其他方法可以做到这一点。

来自MDN：

表示应与特定元素关联但需要的数据没有任何明确的含义

例如，假装您正在构建计算器应用程序。您有显示，键盘和键。

每个键都可以包含类.key，这有助于描述其状态/样式。每个密钥也可以有一个ID（例如#divide），但是如何进一步细分这些密钥来描述它们呢？

好吧，数字键可以有data-type="operand"，加号，减号，减号键等可以有data-type="operator"。您可能会争辩说，您可能不会使用类.operand和.operator，因为作为操作数或运算符不是这些键的可变状态...相反，它是可区分的属性，没有进一步帮助描述关键状态就像一个类。为什么要使用data-type？好吧，正如MDN所说，我们使用它来代替虚构属性，因为div.key没有原生HTML type属性。

为什么这有用？好吧，在您的JavaScript中，您可以通过执行这些键来定位，例如$([data-type="operand"]).on('click', doSomething)。这准确地描述了元素，以及选择元素的原因。如果你曾经使用过一个类甚至是一个ID，那么完全相同的事情是可能的，但我认为在这种情况下，data-*属性有助于从属性和行为中抽象出属性

Answer 2

在HTML中使用data属性的示例。

<!DOCTYPE html>
<html>

<head>
  <script>
    function showDetails(animal) {
      var animalType = animal.getAttribute("data-animal-type");
      alert("The " + animal.innerHTML + " is a " + animalType + ".");
    }
  </script>
</head>

<body>

  <h1>Species</h1>
  <p>Click on a species to see what type it is:</p>

  <ul>
    <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
    <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>
    <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
  </ul>

</body>

</html>

Answer 3

我建议阅读有关数据属性的内容......

class和id是用于标识元素的属性，

data- *是一个个性化标签，程序员可以使用它来存储信息以便在代码中使用这些标签。

这是关于代码组织的，如果没有关于标记的信息的特定属性，则使用data- *。

HTML5中数据标记的简单解释/示例

3 个答案: