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 属性支持的浏览器：