HTML Атрибут ID
Использование атрибута ID
Атрибут id
указывает уникальный идентификатор для элемента HTML (значение должно быть уникальным в HTML-документе).
Значение идентификатора может использоваться CSS и JavaScript для выполнения определенных задач для уникального элемента с указанным значением идентификатора.
В CSS, чтобы выбрать элемент с определенным идентификатором, напишите символ хэша (#), за которым следует идентификатор элемента:
Пример
Использование CSS для стиля элемента с идентификатором "myHeader":
<style>
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
</style>
<h1 id="myHeader">Мой заголовок</h1>
Result:
Мой заголовок
Совет: Атрибут ID можно использовать для любого элемента HTML.
Примечание: Значение идентификатора учитывает регистр.
Примечание: Значение идентификатора должно содержать не менее одного символа и не содержать пробелы (пробелы, вкладки и т. д.).
Разница между классом и ID
Элемент 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>
<!-- A unique element -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple similar elements -->
<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.
Использование атрибута ID в JavaScript
JavaScript может получить доступ к элементу с указанным идентификатором с помощью getElementById()
method:
Примере
Используйте атрибут ID для управления текстом с помощью JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Совет: Изучайте JavaScript в главе HTML JavaScriptили в нашем Справочник по JavaScript.
Закладки с идентификатором и ссылками
Закладки 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>