HTML id属性详细讲解

html 链接 id属性 id属性用于为HTML中的元素指定唯一的ID 。该ID不能用于HTML中的多个元素。您可以将id添加到任何HTML元素。命名id属性id名称区分大小写，名称必须有一个字符，并且两个...

html 链接 id属性

id属性用于为HTML中的元素指定唯一的ID 。该ID不能用于HTML中的多个元素。您可以将id添加到任何HTML元素。

命名id属性id名称区分大小写，名称必须有一个字符，并且两个单词(空格，制表符等)中不能有空格。

使用id属性 (Using id attribute)

id属性可用于引用CSS和JavaScript中HTML标签，以在包含id属性HTML标签中执行某些转换。我们使用＃后跟id属性的名称来引用该元素。

在CSS中引用id属性 (Referencing id Attribute in CSS)

<!DOCTYPE html>
<html>
<head>
<style>
#element {
background-color: #f40;
color: #fff;
padding: 40px;
text-align: center;
        }
</style>
</head>
<body>
<h1 id="element">Hello! This is an HTML element. </h1>
</body>
</html>

Output

输出量

在JavaScript中引用id属性 (Referencing id attribute in JavaScript)

同样在JavaScript中，我们可以使用id属性来引用元素并对其执行特定任务。 document.getElementById()用于使用JavaScript引用元素。

<!DOCTYPE html>
<html>
<body>
<h1 id="greeting">Welcome Text</h1>
<button onclick="displayResult()">Say Hello!</button>
<script>
function displayResult() {
document.getElementById("greeting").innerHTML = "Hello! ";
        }
</script>
</body>
</html>

Output

输出量

After clicking on the "Say Hello!" button...

点击“说声你好！”之后 按钮...

网页中ID的使用 (Uses of id in Webpage)

元素的id和链接是导航到同一页面上太长元素的一种好方法。

使用指向页面中特定ID的链接，可以将我们导航到HTML中的该元素。

我们将看到一个单独的示例来执行此操作。

HTML中的类与ID属性 (Classes vs ID Attribute in HTML)

在HTML中，两个元素用于引用HTML元素。一个类可以用来引用多个HTML元素，而id可以用来引用单个HTML元素。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-06-15 15:00
阅读 ( 789 )
分类：WEB前端开发