HTML - id 屬性

HTML 的 id 屬性用於在 HTML 文件中唯一標識一個元素，允許進行目標樣式設定、指令碼編寫和連結。

此屬性常用於樣式、管理事件和更改文件結構。為了建立互動式和動態網頁，它使開發人員能夠定位特定部分併為其提供專門的行為和外觀。

語法

<tag id = ‘id_name’></tag>

其中 id_name 可以是您選擇的任何變數名稱。

應用於

Id 屬性是一個全域性屬性，這意味著幾乎所有 HTML 標籤都支援它。但是，像 <html>、<head> 這樣的結構標籤不支援 id 標籤。

HTML id 屬性示例

以下示例將說明 HTML id 屬性，以及我們應該在哪裡以及如何使用此屬性！

使用 id 屬性進行文字操作

在此示例中，我們將建立一個文字內容並透過 JavaScript 操作文字，方法是透過定義的 id 選擇元素。

<!Doctype html>
<html>

<body>
    <h3>HTML id Attribute</h3>
    <strong id="myId">Tutorialspoint</strong>
    <p>
        Click this 
        <button onclick="changeElement()">Button</button> 
        to see the change
    </p>
    <script>
        function changeElement() {
            document.getElementById("myId").innerHTML = 
            "Simply Easy Learning!";
        }
    </script>
</body>

</html>

使用 id 屬性訪問 div 元素

考慮另一種情況，我們將使用 id 屬性與 div 元素一起使用，以使用 CSS 為其應用樣式。

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML id attribute</title>
<style>
   /*access element using #id_name */
   #demo {
      width: 310px;
      height: 120px;
      background-color: green;
      align-items: left;
      border-radius: 10px;
   }

   #demo p {
      color: white;
      letter-spacing: 1px;
      text-align: center;
   }
</style>
</head>
<body>
   <!-- Example of HTML 'id' attribute -->
   <strong>HTML 'id' attribute</strong>
   <div id="demo">
      <p>
         HTML id attribute is used to uniquely identify 
         an element within an HTML document, allowing 
         for targeted styling, scripting, and linking.
      </p>
   </div>
</body>
</html>

使用 id 作為選擇器來設定表單樣式

讓我們看看另一個示例，我們將使用 id 屬性與表單元素一起使用，以藉助 CSS 設定登入表單的樣式。

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML id attribute</title>
   <style>
      /*access element using #id_name */
      #myForm {
         width: 300px;
         height: 210px;
         background-color: aqua;
         border-radius: 10px;
         text-align: center;
      }

      #myForm h1 {
         text-align: center;
         font-family: sans-serif;
         margin-top: 5px;
      }

      #myForm input {
         padding: 8px;
         margin: 5px 0px;
      }

      #myForm button {
         width: 105px;
         padding: 8px;
      }
   </style>
</head>
<body>
   <!-- Example of HTML 'id' attribute -->
   <p>Example of HTML 'id' attribute</p>
   <form id='myForm'>
      <h1>Login</h1>
      <br> Username: 
         <input type="text">
      <br> Password: 
         <input type="password">
      <br>
      <button>Login</button>
   </form>
</body>
</html>

支援的瀏覽器

屬性
id	是	是	是	是	是

html_attributes_reference.htm

列印頁面