資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 HTML 中宣告自定義屬性？
在本文中，我們將討論如何在 HTML 中宣告自定義屬性。當您想要儲存一些不屬於標準 HTML 屬性的其他資訊時，自定義屬性在 HTML 中非常有用。它允許在 HTML 中實現更大的靈活性和自定義，並有助於使您的程式碼更易於維護和理解。
方法
我們有兩種不同的方法來宣告 HTML 中的自定義屬性，包括以下內容 -
使用“data- 字首”
使用“自定義字首”
讓我們詳細瞭解每個步驟。
方法：使用“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- 字首”和“自定義字首”。自定義字首和 data- 字首都用於在 HTML 中宣告自定義屬性，但 data- 字首得到更廣泛的認可，並且所有現代瀏覽器都支援它。自定義字首更靈活，因為它允許您選擇自己的字首名稱，但它可能不被所有瀏覽器或工具識別。
6K+ 閱讀量
