HTML Id屬性用法及代碼示例

HTML id 屬性為文檔中的元素提供唯一標識符。它允許通過 CSS 和 JavaScript 有針對性地選擇和操作元素，從而促進特定的樣式和函數。在 CSS 中，id 屬性使用#符號後跟 id。在所有情況下，tag=” ” 中的引號都不是強製的。但用引號寫作是一個很好的做法。

HTML Id 屬性語法：

 <tag id=""></tag>

注意：這是一個全局屬性，它可以用在所有標簽中。

使用 id 屬性例子：

在此示例中，我們簡單地為 id “geeks” 的元素設置樣式。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #geeks { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h2>Welcome to GeeksforGeeks</h2> 
    <h1 id="geeks">Hi Geeks!</h1> 
</body> 
  
</html>

輸出：

HTML id 屬性

解釋：

在此示例中，我們包含兩個標題，一個顯示 “Welcome to GeeksforGeeks”，另一個顯示 id “geeks”。
CSS 以 id “geeks” 為目標元素，將其文本顏色設置為綠色，創建視覺上獨特的外觀。
通過將第二個標題設置為 uniqHTML Id AttributeHTML Id Attributely，它可以從其餘內容中脫穎而出，吸引人們對特定消息“嗨極客！”的關注。

使用 id 屬性示例：

在此示例中，我們通過獲取 id 值將樣式屬性添加到特定 id 屬性值。

HTML


<!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">GeeksforGeeks</div> 
    <div id="geeks"> 
        A computer science portal for geeks 
    </div> 
</body> 
</html>

輸出：

將樣式屬性添加到特定的 id 屬性值

解釋

這裏的 HTML 文檔包含兩個具有唯一 id 屬性的 <div> 元素：“gfg” 和 “geeks”。HTML Id 屬性
CSS 樣式應用於每個 id 選擇器，以修改文本顏色、字體大小、字體粗細和文本對齊等屬性。
“gfg” id 樣式影響 “GeeksforGeeks” 文本，使其變大、粗體且居中。 “geeks” id 樣式修改說明文本，調整其對齊方式和大小。

注意：在 HTML5 中，任何 HTML 標記都可以使用 id 屬性，但在 HTML 4.01 中，使用 id 屬性有一些限製。它不能被 <base>、<head>、<html>、<meta>、<param>、<script>、<style> 和 <title> 標記使用。在 HTML4.01 中 id 不能以數字開頭。

JavaScript 中 ID 屬性的使用：

在 JavaScript 中，ID 屬性唯一標識 HTML 元素，從而可以通過諸如getElementById()它們充當訪問特定元素以實現動態函數和交互的鉤子。

JavaScript 中的 ID 屬性示例：

此示例說明了在 Javascript 中通過以下方式獲取 id 屬性值getElementById().

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Using the id in Javascript</title> 
    <style> 
        #geeks { 
            font-size: 50px; 
            color: #009900; 
            font-weight: bold; 
            margin-bottom: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="geeks">GeeksforGeeks</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>

輸出：

使用getElementById()方法獲取id屬性值

解釋：

在上麵的示例中，包含一個 id 為 “geeks” 的 div 元素，最初顯示“GeeksforGeeks”。
單擊該按鈕會觸發名為“geeksResult()” 的 JavaScript 函數。
該函數將 div 元素的innerHTML 修改為“極客的計算機科學門戶”。

HTML Id 屬性支持的瀏覽器：

相關用法

注：本文由純淨天空篩選整理自AshishVishwakarma1大神的英文原創作品 HTML Id Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。

HTML Id屬性用法及代碼示例

HTML Id 屬性語法：

使用 id 屬性例子：

HTML

解釋：

使用 id 屬性示例：

HTML

解釋

JavaScript 中 ID 屬性的使用：

JavaScript 中的 ID 屬性示例：

HTML

解釋：

HTML Id 屬性用例

1. HTML 中的 id 屬性有什麽用？

2.HTML 中 id 和 class 屬性的區別

3.HTML 中 id 屬性的有效值是什麽？

4.如何在 JavaScript 中通過 ID 選擇元素？

HTML Id 屬性支持的瀏覽器：