HTML Атрибуты class
Использование атрибута Class
Атрибут class
указывает одно или несколько имен классов для элемента HTML.
Имя класса может использоваться CSS и JavaScript для выполнения определенных задач для элементов с указанным именем класса.
В CSS, чтобы выбрать элементы с определенным классом, напишите символ точки (.), за которым следует имя класса:
Пример
Используйте CSS для оформления всех элементов с именем класса "City":
<style>
.city {
background-color: tomato;
color: white;
padding:
10px;
}
</style>
<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>
Result:
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Совет: Атрибут Class можно использовать для любого элемента HTML.
Примечание: Имя класса чувствительно к регистру!
Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.
Использование атрибута Class в JavaScript
JavaScript может получить доступ к элементам с указанным именем класса с помощью getElementsByClassName()
method:
Пример
Когда пользователь щелкает по кнопке, скройте все элементы с именем класса "city":
<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 могут иметь более одного имени класса, каждое имя класса должно быть разделено пробелами.
Пример
Элементы стиля с именем класса "City", а также элементы стиля с именем класса "Main":
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
В приведенном выше примере первый элемент <h2>
принадлежит как классу "City", так и классу "Main".
Тот же класс, другой тег
Различные теги, такие как <h2>
и <p>
, могут иметь одно и то же имя класса и тем самым использовать один и тот же стиль:
Пример
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>