O class atributo HTML é usado para especificar uma classe para um elemento HTML.
Vários elementos HTML podem compartilhar a mesma classe.
Usando o atributo da classe
O class atributo é frequentemente usado para apontar para um nome de classe em uma folha de estilos. Também pode ser usado por um JavaScript para acessar e manipular elementos com o nome de classe específico.
No exemplo a seguir, temos três <div>elementos com um class atributo com o valor de “cidade”. Todos os três <div> elementos serão estilizados igualmente, de acordo com a .city definição de estilo na seção principal:
Exemplo
<!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>
A sintaxe da classe
Para criar uma classe; escreva um caractere de ponto (.) seguido de um nome de classe. Em seguida, defina as propriedades CSS entre chaves {}:
Exemplo
Crie uma classe chamada “cidade”:
<!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>
Múltiplas Classes
Os elementos HTML podem pertencer a mais de uma classe.
Para definir várias classes, separe os nomes das classes com um espaço, por exemplo, <div class = "city main">. O elemento será estilizado de acordo com todas as classes especificadas.
No exemplo a seguir, o primeiro <h2>elemento pertence à city classe e também à main classe e obterá os estilos CSS de ambas as classes:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<h2>Multiplas Classes</h2>
<p>aqui uma</p>
<h2 class="city main">aqui 2</h2>
<h2 class="city">aqui 3</h2>
<h2 class="city">aqui 4</h2>
</body>
</html>
Uso do Atributo da classe em JavaScript
O nome da classe também pode ser usado pelo JavaScript para executar determinadas tarefas para elementos específicos.
JavaScript pode acessar elementos com um nome de classe específico com o getElementsByClassName()método:
Exemplo
Clique em um botão para ocultar todos os elementos com o nome da classe “cidade”:
<!DOCTYPE html>
<html>
<body>
<h2>Use of The class Attribute in JavaScript</h2>
<p>Click the button to hide all elements with class name "city":</p>
<button onclick="myFunction()">Hide elements</button>
<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>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
Resumo do capítulo
O class atributo HTML especifica um ou mais nomes de classe para um elemento
As classes são usadas por CSS e JavaScript para selecionar e acessar elementos específicos
O class atributo pode ser usado em qualquer elemento HTML
O nome da classe faz distinção entre maiúsculas e minúsculas
Elementos HTML diferentes podem apontar para o mesmo nome de classe
JavaScript pode acessar elementos com um nome de classe específico com o getElementsByClassName() método.
<< Anterior Bloco HTML e elementos embutidos
Deixe um comentário