атрибуты id и класса HTML
идентификатор и класс
Атрибуты HTML id и class идентифицируют элемент в документе HTML. Это полезно для применения стилей и управления элементом с помощью DOM и JavaScript.
Атрибут id элемента HTML
1. Атрибут id идентифицирует элемент в документе HTML. Это происходит, когда значение атрибута id элемента HTML совпадает с именем идентификатора, либо в CSS, либо в скрипте (например, JavaScript).
2. Как только имя используется в качестве значения атрибута id элемента HTML, его нельзя использовать в качестве значения атрибута id любого другого элемента.
Синтаксис
<ElementName id = "name_of_the_id"> текстовое содержимое </ ElementName>
Где ElementName - это любое имя элемента HTML.
Тип значений
Тип значения для атрибута id - ID.
Значение
Значение атрибута id указано автором веб-документа. Он должен быть уникальным в веб-документе.
Пример использования атрибута id для применения стиля с CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Example of HTML id attribute with CSS - HTML tutorial |
w3resource</title>
<style type="text/css">
#w3r {
color: red;
}
</style>
</head>
<body>
<p id="w3r" >Even after three months of the devastating flood in
Pakistan, people are still without food, shelter or hope - BBC
reports.</p>
</body>
</html>
Результат
Посмотреть этот пример в отдельном окне браузера
Пример использования атрибута id с JavaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Example of HTML id attribute with JavaScript - HTML tutorial |
w3resource</title>
<script type="text/javascript">
function w3r(){
var w3rValue = document.getElementById("w3r");
alert("The text enclosed by p is : " + w3rValue.innerHTML);
}
</script>
</head>
<body onload="w3r()">
<p id="w3r">Even after three months of the devastating flood in Pakistan,
people are still without food, shelter or hope - BBC reports.</p>
</body>
</html>
Результат
Посмотреть этот пример в отдельном окне браузера
Пример атрибута id с JavaScript
Описание атрибута класса HTML
1. Атрибут класса идентифицирует элемент в документе HTML. Это происходит, когда значение атрибута class элемента HTML совпадает с именем класса. Обычно это используется для применения стилей.
2. В отличие от идентификатора, имя класса может использоваться с несколькими элементами в HTML-документе.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Example of HTML class attribute with CSS - HTML tutorial |
w3resource</title>
<style type="text/css">
.w3r {
background: lightyellow;
}
</style>
</head>
<body>
<p class="w3r">Even after three months of the devastating flood in
Pakistan, people are still without food, shelter or hope - BBC
reports.</p>
</body>
</html>
Результат
Посмотреть этот пример в отдельном окне браузера
Заметка
На этой странице мы обсудили идентификатор HTML и атрибут класса. Эти два атрибута называются широкими идентификаторами документа, которые используются для идентификации элемента на странице HTML. Это полезно для применения стилей к определенному элементу или для управления элементом (форматом и стилем) на странице HTML.
Предыдущая: атрибут цитирования HTML
Далее: HTML classid атрибут
Предыдущая: атрибут метки HTML
Далее: атрибут longdesc HTML
Новый контент: Composer: менеджер зависимостей для PHP , R программирования