кодесурса

атрибуты id и класса HTML

script1adsense2code
script1adsense3code

идентификатор и класс

Атрибуты 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 с CSS

Пример использования атрибута 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

Посмотреть этот пример в отдельном окне браузера

Пример атрибута класса с CSS

Заметка

На этой странице мы обсудили идентификатор HTML и атрибут класса. Эти два атрибута называются широкими идентификаторами документа, которые используются для идентификации элемента на странице HTML. Это полезно для применения стилей к определенному элементу или для управления элементом (форматом и стилем) на странице HTML.

Предыдущая: атрибут цитирования HTML
Далее: HTML classid атрибут

Предыдущая: атрибут метки HTML
Далее: атрибут longdesc HTML

Новый контент: Composer: менеджер зависимостей для PHP , R программирования


script1adsense4code
script1adsense5code
disqus2code
script1adsense6code
script1adsense7code
script1adsense8code
buysellads2code