HTML id 属性 _ 潘子夜个人博客

文
章
目
录

id 属性用于指定 HTML 文档中元素的唯一标识符。它分配一个唯一的标识符，供 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>