HTML id 属性

前端 潘老师 6个月前 (10-17) 128 ℃ (0) 扫码查看



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>  


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/9725.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】