首页教程软件教程正文

HTML id 属性

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 511 浏览 975 个字

摘要 :

文章目录语法 id 属性用于指定 HTML 文档中元素的唯一标识符。它分配一个唯一的标识符，供 CSS 和 JavaScript 用于执行特定的任务。注意：在层叠样式表 (CSS) 中，……

文
章
目
录

语法

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>