Inhaltsverzeichnis
Approaches
方法:使用“data-前缀方法”
Example
Employee Table
方法:使用“自定义前缀方法”
Tutorials point
Conclusion
Heim Web-Frontend HTML-Tutorial Wie deklariere ich benutzerdefinierte Attribute in HTML?

Wie deklariere ich benutzerdefinierte Attribute in HTML?

Aug 21, 2023 am 08:37 AM
html 自定义属性 声明

Wie deklariere ich benutzerdefinierte Attribute in HTML?

In this article, we will discuss how to declare a custom attribute in HTML. Custom attributes can be useful in HTML when you want to store some additional information that is not part of the standard HTML attributes. It allows for more flexibility and customization in HTML and can help make your code more maintainable and understandable.

Approaches

We have two different approaches to declaring a custom attribute in HTML including the following −

  • 使用“ data- 前缀”

  • 使用“自定义前缀”

让我们详细看一下每个步骤。

方法:使用“data-前缀方法”

第一种方法是在HTML中声明一个自定义属性,使用“data-”前缀。我们可以通过在属性名前加上"data-"来定义自定义属性。您可以使用自己选择的前缀来创建自定义属性的名称。这样可以将特定数据附加到HTML元素上,可以很容易地使用CSS、JavaScript或jQuery来定位。

Example

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

<!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 id="Employee-Table">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> 
Nach dem Login kopieren

Note − Here, JavaScript can access the custom attributes in the example code by selecting the "tr" elements based on their custom attributes, and then logging the values of those attributes to the console.

方法:使用“自定义前缀方法”

第一种方法是在HTML中声明一个自定义属性作为“自定义前缀”。在HTML中,自定义前缀指的是在HTML元素上创建自定义属性。前缀可以是您选择的任何名称,添加在属性名称之前,它可以用于向元素添加附加数据或信息。通过使用自定义前缀,您可以创建适用于您需求的自定义属性,并可以在CSS或JavaScript中进行定位。

Example

Following is an example of declaring a custom attribute in HTML using “custom prefix”.

<!DOCTYPE html>
<html>
<head>
   <title>Custom Attribute Example</title>
   <style>
      [custom] {
         color: red;
      }
   </style>
</head>
<body>
   <h1 id="Tutorials-point">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>
Nach dem Login kopieren

It defines a custom attribute named "custom" and applies the CSS style to any element with that attribute.The JavaScript code selects the header and paragraph elements based on their custom attributes and logs the values of those attributes.

Conclusion

在本文中,我们研究了在HTML中声明自定义属性的两种不同方法。在这里,我们使用了“data-前缀”和“自定义前缀”这两种不同的方法。自定义前缀和data-前缀都用于在HTML中声明自定义属性,但是data-前缀更广泛被认可,并且被所有现代浏览器支持。自定义前缀更灵活,因为它允许您选择自己的前缀名称,但是它可能不被所有浏览器或工具认可。

Das obige ist der detaillierte Inhalt vonWie deklariere ich benutzerdefinierte Attribute in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Wie analysiert und verarbeitet man HTML/XML in PHP? Wie analysiert und verarbeitet man HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet

See all articles