HTML如何使用id属性？（唯一标识符）

2021年3月18日15:17:58 发表评论 861 次浏览

id属性是用于指定文档的唯一标识符。 CSS和JavaScript使用它来为唯一元素执行特定任务。在CSS中, id属性使用＃符号后跟id来使用。

语法如下：

<tag id=""></tag>

例子：

<!DOCTYPE html>
< html >
< head >
     < title >Id Attributes</ title >
     < style > 
         #gfg {
             color:#009900;
             font-size:50px;
             font-weight:bold;
             text-align:center;
          }
          #geeks {
              text-align:center;
              font-size:20px;
          }
     </ style >
</ head >
< body >
     < div id = "gfg" >lsbin</ div >
     < div id = "geeks" >A computer science portal for geeks</ div >
</ body >
</ html >

输出如下：

注意：在HTML5中, 任何HTML标记都可以使用id属性, 但是在HTML 4.01中, 使用id属性存在一些限制。 <base>, <head>, <html>, <meta>, <param>, <script>, <style>和<title>标记不能使用它。在HTML4.01中, id不能以数字开头。

在JavaScript中使用ID属性

在JavaScript中, id属性用于操作文本, 如果要在脚本中的精确元素上进行更改, 则可以使用id属性。

例子：

<!DOCTYPE html>
< html >
     < head >
         < title >use id in javascript</ title >
         < style >
             #geeks {
                 font-size:50px;
                 color:#009900;
                 font-weight:bold;
                 margin-bottom:10px;
             }
         </ style >
     </ head >
     < body >
     < div id = "geeks" >lsbin</ div >
     < button onclick = "geeksResult()" >Display text change</ button >
      
     < script >
     function geeksResult() {
         document.getElementById("geeks").innerHTML = 
                              "A computer science portal for geeks";
         document.getElementById("geeks").style.color = "black";
     }
     </ script >
      
     </ body >
</ html >

输出如下：