如何在 HTML 中声明自定义属性?

htmlweb developmentfront end technology更新于 2024/1/25 10:52:17

在本文中，我们将讨论如何在 HTML 中声明自定义属性。当您想要存储一些不属于标准 HTML 属性的附加信息时，自定义属性在 HTML 中非常有用。它允许在 HTML 中提供更大的灵活性和自定义性，并有助于使您的代码更易于维护和理解。

方法

我们有两种不同的方法在 HTML 中声明自定义属性，包括以下几种:

使用"data- 前缀"
使用"custom 前缀"

让我们详细了解每个步骤。

方法:使用"data- 前缀方法"

第一种方法是在 HTML 中将自定义属性声明为"data- 前缀"。我们可以通过在属性名称前添加"data-"前缀来定义自定义属性。您可以使用自己选择的前缀为自定义属性创建名称。这允许您将特定数据附加到 HTML 元素，以便使用 CSS、JavaScript 或 jQuery 轻松定位。

示例

以下是在 HTML 中使用"data-"前缀声明自定义属性的示例。

<!DOCTYPE html>
<html>
<head>
   <title>Employee Table</title>
   <style>
      h1 {
         color: blue;
      }
      th {
         color: red;
      }
      table {
         border-collapse: collapse;
         width: 100%;
      }
      th, td {
         padding: 5px;
         text-align: left;
         border-bottom: 1px solid #ddd;
      }
      tr:nth-child(even) {
         background-color: #f2f2f2;
      }
   </style>
</head>
<body>
   <h1>Employee Table</h1>
   <table>
      <thead>
         <tr>
            <th>Employee ID</th>
            <th>Name</th>
            <th>Department</th>
            <th>Salary</th>
         </tr>
      </thead>
      <tbody>
         <tr data-empid="001" data-dept="IT" data-salary="75000">
            <td>001</td>
            <td>Taylor</td>
            <td>IT</td>
            <td>$75,000</td>
         </tr>
         <tr data-empid="002" data-dept="HR" data-salary="60000">
            <td>002</td>
            <td>Jhon</td>
            <td>HR</td>
            <td>$60,000</td>
         </tr>
      </tbody>
   </table>
   <script>
      const rows = document.querySelectorAll("tr[data-empid]");
      rows.forEach(row => {
         const empid = row.dataset.empid;
         const dept = row.dataset.dept;
         const salary = row.dataset.salary;
         console.log(`Employee ID: ${empid}, Department: ${dept}, Salary: ${salary}`);
      });
   </script>
</body>
</html>

注意 - 此处，JavaScript 可以通过根据自定义属性选择"tr"元素，然后将这些属性的值记录到控制台来访问示例代码中的自定义属性。

方法:使用"自定义前缀方法"

第一种方法是在 HTML 中将自定义属性声明为"自定义前缀"。在 HTML 中，自定义前缀是指在 HTML 元素上创建自定义属性。前缀可以是您选择的任何名称，添加到属性名称之前，可用于向元素添加额外的数据或信息。通过使用自定义前缀，您可以创建自己的自定义属性，这些属性特定于您的需求，并且可以在 CSS 或 JavaScript 中定位。

示例

以下是使用"自定义前缀"在 HTML 中声明自定义属性的示例。

<!DOCTYPE html>
<html>
<head>
   <title>Custom Attribute Example</title>
   <style>
      [custom] {
         color: red;
      }
   </style>
</head>
<body>
   <h1 custom="header-color">Tutorials point</h1>
   <p custom="paragraph-color">Hello World!</p>
   <script>
      const header = document.querySelector("[custom='header-color']");
      const paragraph = document.querySelector("[custom='paragraph-color']")
      console.log(`Header color: ${header.getAttribute('custom')}`);
      console.log(`Paragraph color: ${paragraph.getAttribute('custom')}`);
   </script>
</body>
</html>

它定义了一个名为"custom"的自定义属性，并将 CSS 样式应用于任何具有该属性的元素。JavaScript 代码根据自定义属性选择标题和段落元素，并记录这些属性的值。

结论

在本文中，我们研究了两种在 HTML 中声明自定义属性的不同方法。在这里，我们使用了"data- 前缀"和"custom 前缀"两种不同的方法。custom 前缀和 data- 前缀都用于在 HTML 中声明自定义属性，但 dataprefix 的识别范围更广，并且所有现代浏览器都支持它。custom 前缀更灵活，因为它允许您选择自己的前缀名称，但并非所有浏览器或工具都能识别它。