Атрибут id HTML

HTML id Свойство используется для указания уникального идентификатора элемента HTML.

В одном HTML-документе не может существовать несколько элементов с одинаковым идентификатором.

Использование свойства id

id Свойство определяет уникальный идентификатор элемента HTML. id Значение свойства в документе HTML должно быть уникальным.

id Свойства используются для указания на конкретное утверждение стиля в таблице стилей. JavaScript также может использовать его для доступа и операции с элементами, имеющими определенный ID.

Синтаксис идентификатора: пишите один символ номера (#), за которым следует имя идентификатора. Затем, в фигурных скобках {} определяются свойства CSS.

ниже приведен пример <h1> элемент, который указывает на имя id "myHeader". Этот <h1> Элементы будут соответствовать элементам, указанным в head части #myHeader Стиль-definition для стилизации:

Пример

<!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>

попробуйте это самому

Комментарий:Имя ID чувствительно к регистру!

Комментарий:ID должен содержать по крайней мере один символ и не должен содержать пробельных символов (пробелы, табуляторы и т.д.).

Разница между Class и ID

Одна и та же классовая命名 может использоваться несколькими HTML элементами, в то время как имя id может использоваться только одним HTML элементом на странице:

Пример

<style>
/* Установить стиль для элемента с id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* Установить стиль для всех элементов с классом "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Элементы с уникальными id -->
<h1 id="myHeader">My Cities</h1>
<!-- Множество элементов с одинаковыми классами -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

попробуйте это самому

Совет:Пожалуйста, обратитесь к нашему Уроки CSS Изучите больше CSS знаний.

HTML закладки реализуются через ID и ссылки

HTML закладки используются для того, чтобы читатель мог перейти к определенной части веб-страницы.

Если страница очень длинная, закладка может быть очень полезной.

Чтобы использовать закладку, вам нужно сначала создать ее, а затем добавить к ней ссылку.

Затем, когда вы нажимаете на ссылку, страница прокручивается до места с закладкой.

Пример

Сначала, с id Атрибут создает закладку:

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

Затем, на той же странице, добавьте ссылку на эту закладку ("Перейти к четвертой главе"):

Пример

<a href="#C4">Перейти к четвертой главе</a>

попробуйте это самому

или, на другой странице, добавьте ссылку на эту закладку ("Перейти к четвертой главе"):

<a href="html_demo.html#C4">Перейти к главе 4</a>

Использование атрибута id в JavaScript

JavaScript также может использовать атрибут id для выполнения某些 задач для определенного элемента.

JavaScript может использовать getElementById() Метод доступа к элементам с определенным id:

Пример

Используйте атрибут id для обработки текста с помощью JavaScript:

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

попробуйте это самому

Совет:Пожалуйста, HTML JavaScript в этой главе, или из наших Уроки JavaScript изучайте JavaScript.

Обобщение главы

  • id Атрибут используется для указания уникального id HTML элемента
  • id Значение атрибута в документе HTML должно быть уникальным
  • CSS и JavaScript могут использовать id Атрибут используется для выбора элементов или установки стиля для определенного элемента
  • id Значение атрибута чувствительно к регистру
  • id Атрибут также можно использовать для создания HTML закладок
  • JavaScript может использовать getElementById() Метод доступа к элементам с определенным id