Атрибут класса HTML
Атрибут HTML classиспользуется для указания класса элемента HTML.
Несколько элементов HTML могут иметь один и тот же класс.
Использование атрибута класса
Атрибут classчасто используется для указания на имя класса в таблице стилей. Он также может использоваться JavaScript для доступа и управления элементами с определенным именем класса.
В следующем примере у нас есть три <div>элемента с classатрибутом со значением «город». Все три <div>
элемента будут иметь одинаковый стиль в соответствии с .city
определением стиля в разделе заголовка:
Пример
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
В следующем примере у нас есть два <span>элемента с classатрибутом со значением «примечание». Оба <span>
элемента будут иметь одинаковый стиль в соответствии с .note
определением стиля в разделе заголовка:
Пример
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Совет. Этот classатрибут можно использовать в любом элементе HTML.
Примечание. Имя класса чувствительно к регистру!
Совет: вы можете узнать больше о CSS в нашем Учебнике по CSS .
Синтаксис класса
Создать класс; напишите символ точки (.), за которым следует имя класса. Затем определите свойства CSS в фигурных скобках {}:
Пример
Создайте класс с именем «город»:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<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>
</body>
</html>
Несколько классов
HTML-элементы могут принадлежать более чем одному классу.
Чтобы определить несколько классов, разделите имена классов пробелом, например <div class="city main">. Элемент будет оформлен в соответствии со всеми указанными классами.
В следующем примере первый <h2>элемент принадлежит как
cityклассу, так и mainклассу, и он получит стили CSS от обоих классов:
Пример
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
Разные элементы могут иметь один и тот же класс
Различные элементы HTML могут указывать на одно и то же имя класса.
В следующем примере оба <h2>и <p>
указывают на класс «город» и будут иметь один и тот же стиль:
Пример
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
Использование атрибута класса в JavaScript
Имя класса также может использоваться JavaScript для выполнения определенных задач для определенных элементов.
JavaScript может получить доступ к элементам с определенным именем класса с помощью getElementsByClassName()метода:
Пример
Нажмите на кнопку, чтобы скрыть все элементы с именем класса «город»:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
Не волнуйтесь, если вы не понимаете код в приведенном выше примере.
Вы узнаете больше о JavaScript в нашей главе HTML JavaScript или можете изучить наш учебник по JavaScript .
Краткое содержание главы
- Атрибут HTML
classуказывает одно или несколько имен классов для элемента. - Классы используются CSS и JavaScript для выбора и доступа к определенным элементам.
- Атрибут
classможно использовать в любом элементе HTML . - Имя класса чувствительно к регистру
- Различные элементы HTML могут указывать на одно и то же имя класса.
- JavaScript может получить доступ к элементам с определенным именем класса с помощью
getElementsByClassName()метода