HTML Id屬性用法及代碼示例

id 屬性用於指定 HTML 文檔元素的唯一 ID。它分配 CSS 和 JavaScript 用於執行某些任務的唯一標識符。

注意：在層疊樣式表 (CSS) 中，我們可以使用 # 符號後跟 id 輕鬆選擇具有特定 id 的元素。

注意：JavaScript 可以使用 getElementById() 方法訪問具有給定 ID 的元素。

用法

<tag id="value">

範例1：下麵的例子描述了如何在 CSS 文檔中使用 id 屬性：

<!DOCTYPE html>
<html>
<head>
<title>
Example of Id attribute in CSS
</title>
<style>
#Cars {
padding:40px;
background-color:lightblue;
color:black;    
text-align:center;
} 

#Bikes
{
padding:50px;
background-color:lightGreen;
text-align:center;
}
</style>
</head>
<body>
<p> Use CSS to style an element with the id:</p>
<h1 id="Cars"> Cars </h1>
<h1 id="Bikes"> Bikes </h1>
</body>
</html>

輸出：

範例2：以下示例描述了如何在 JavaScript 中使用 ID 屬性。

<!DOCTYPE html>
<html> 
<head> 
<title> Date Attribute </title> 
<script> 
function viewdate() { 
var x = document.getElementById("dob").value; 
document.getElementById("demo").innerHTML = x; 
</script> 
</head> 
<body> 
Employee Name:<input type="text" placeholder="Your Good name"/> 
<br>
<br>
Date of Joining:
<input type="date" id="dob">
<br> 
<button onclick="viewdate()"> Submit 
</button> 
<br>
<h2 id="demo"> </h2> 
</body> 
</html>

輸出：

瀏覽器支持

Element	Chrome	IE	Firefox	Opera	Safari
<id>	Yes	Yes	Yes	Yes	Yes

相關用法

注：本文由純淨天空篩選整理自 HTML Id Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。