Atribute ng id ng HTML

HTML id Ang katangian ay ginagamit upang tukuyin ang natatanging id ng elemento ng HTML.

Hindi maaaring magkaroon ng maraming elemento na may katulad na id sa isang dokumentong HTML.

Gamitin ang katangian ng id

id Ang katangian ay ginagamit upang tukuyin ang natatanging ID ng elemento ng HTML. id Ang halaga ng katangian ay dapat maging natatanging sa dokumentong HTML.

id Ang mga katangian ay ginagamit upang ayusin ang partikular na deklarasyon ng estilo sa table ng estilo. Maaari ring gamitin ito ng JavaScript upang tanggapin at mag-operate ng mga elemento na may partikular na ID.

Ang syntax ng id ay: isulat ang isang tanging tanda (#), pagkatapos ay isulat ang pangalan ng id. Pagkatapos, idinefini sa loob ng mga pisara {} ang mga katangian ng CSS.

pagkatapos ng <h1> na tumutukoy sa pangalan ng id "myHeader". Ang mga sumusunod na halimbawa ay mayroon <h1> Ang elemento ay magiging ayon sa elemento sa bahagi ng head: #myHeader Ang estilo ay tinatalaga sa pamamagitan ng paglilinang ng estilo:

实例

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>

亲自试一试

Komento:Ang pangalan ng id ay may pagkakabisa sa kapwa may kapisyan at may kahulugan!

Komento:Ang id ay dapat na may kahit anong simbolo, at hindi dapat magkaroon ng espasyo (spasi, tab, atbp.).

Pagkakaiba ng Class at ID

Ang parehong klase ay maaaring gamitin ng maraming HTML na elemento, habang ang pangalan ng id ay dapat na magkaroon ng isang elemento lamang sa pahina:

实例

<style>
/* Nagtatalaga ng estilo sa elemento na may id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* Nagtatalaga ng estilo sa lahat ng elemento na may klase "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Mayroong magkakahiwalay na id na elemento -->
<h1 id="myHeader">My Cities</h1>
<!-- Mayroong magkakaparehong klase na maraming elemento -->
<h2 class="city">London</h2>
<p>London ay ang kabisera ng Inglatera.</p>
<h2 class="city">Paris</h2>
<p>Paris ay ang kabisera ng Pransya.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo ay ang kabisera ng Hapon.</p>

亲自试一试

提示：Mangyaring pumunta sa aming CSS 教程 saan upang mabasa ang higit pang kaalaman sa CSS.

HTML bookmark sa pamamagitan ng ID at link

Ang HTML bookmark ay ginagamit upang ipaalam ang mga mambabasa na lumipat sa partikular na bahagi ng web page.

Kung ang pahina ay napakabagong, maaaring magiging kapaki-pakinabang ang bookmark.

Upang gamitin ang bookmark, dapat mo muna itong gumawa at magdagdag ng link.

Pagkatapos, kapag inililink ang pahina ay maglalakad hanggang sa posisyon na may bookmark.

实例

首先，用 id 属性创建书签：

<h2 id="C4">第四章</h2>

然后，在同一张页面中，向这个书签添加一个链接（“跳转到第四章”）：

实例

<a href="#C4">跳转到第四章</a>

亲自试一试

或者，在另一张页面中，添加指向这个书签的链接（“跳转到第四章”）：

<a href="html_demo.html#C4">Jump to Chapter 4</a>

在 JavaScript 中使用 id 属性

JavaScript 也可以使用 id 属性为特定元素执行某些任务。

JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素：

实例

使用 id 属性通过 JavaScript 来处理文本：

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

亲自试一试

提示：请在 JavaScript ng HTML 这一章中，或我们的 JavaScript 教程 中学习 JavaScript。

本章总结

  • id 属性用于为 HTML 元素指定唯一的 id
  • id 属性的值在 HTML 文档中必须是唯一的
  • CSS 和 JavaScript 可使用 id 属性来选取元素或设置特定元素的样式
  • id 属性的值区分大小写
  • id 属性还可用于创建 HTML 书签
  • JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素