Атрибут идентификатора HTML
Атрибут HTML idиспользуется для указания уникального идентификатора элемента HTML.
В HTML-документе не может быть более одного элемента с одинаковым идентификатором.
Использование атрибута id
Атрибут idуказывает уникальный идентификатор элемента HTML. Значение id
атрибута должно быть уникальным в HTML-документе.
Атрибут idиспользуется для указания на конкретное объявление стиля в таблице стилей. Он также используется JavaScript для доступа и управления элементом с определенным идентификатором.
Синтаксис для идентификатора: напишите символ решетки (#), за которым следует имя идентификатора. Затем определите свойства CSS в фигурных скобках {}.
В следующем примере у нас есть <h1>элемент, который указывает на имя идентификатора «myHeader». Этот <h1>
элемент будет оформлен в соответствии с #myHeader
определением стиля в разделе заголовка:
Пример
<!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>
Примечание. Имя идентификатора чувствительно к регистру!
Примечание. Имя идентификатора должно содержать хотя бы один символ, не может начинаться с цифры и не должно содержать пробелов (пробелов, табуляции и т. д.).
Разница между классом и идентификатором
Имя класса может использоваться несколькими элементами HTML, а имя идентификатора должно использоваться только одним элементом HTML на странице:
Пример
<style>
/* Style the element with the id "myHeader"
*/
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
/* Style all
elements with the class name "city" */
.city
{
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple elements with same class -->
<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 с идентификатором и ссылками
Закладки HTML используются для того, чтобы читатели могли переходить к определенным частям веб-страницы.
Закладки могут быть полезны, если ваша страница очень длинная.
Чтобы использовать закладку, ее нужно сначала создать, а затем добавить на нее ссылку.
Затем при нажатии на ссылку страница будет прокручиваться до места с закладкой.
Пример
Сначала создайте закладку с idатрибутом:
<h2 id="C4">Chapter 4</h2>
Затем добавьте ссылку на закладку («Перейти к главе 4») на той же странице:
Пример
<a href="#C4">Jump to Chapter 4</a>
Или добавьте ссылку на закладку («Перейти к главе 4») с другой страницы:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Использование атрибута id в JavaScript
Атрибут idтакже может использоваться JavaScript для выполнения некоторых задач для этого конкретного элемента.
JavaScript может получить доступ к элементу с определенным идентификатором с помощью getElementById()метода:
Пример
Используйте idатрибут для управления текстом с помощью JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Совет: Изучите JavaScript в главе HTML JavaScript или в нашем Учебнике по JavaScript .
Краткое содержание главы
- Атрибут
idиспользуется для указания уникального идентификатора элемента HTML. - Значение
idатрибута должно быть уникальным в HTML-документе. - Атрибут
idиспользуется CSS и JavaScript для стилизации/выбора определенного элемента. - Значение
idатрибута чувствительно к регистру - Атрибут
idтакже используется для создания закладок HTML . - JavaScript может получить доступ к элементу с определенным идентификатором с помощью
getElementById()метода