Attributo di classe HTML
Esempio
Uso dell'attributo class in un documento HTML:
<html>
<head>
<style>
h1.intro {
color: blue;
}
p.important {
color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>
</body>
</html>
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
L' class
attributo specifica uno o più nomi di classe per un elemento.
L' class
attributo viene utilizzato principalmente per puntare a una classe in un foglio di stile. Tuttavia, può anche essere utilizzato da un JavaScript (tramite il DOM HTML) per apportare modifiche agli elementi HTML con una classe specificata.
Supporto browser
Attribute | |||||
---|---|---|---|---|---|
class | Yes | Yes | Yes | Yes | Yes |
Sintassi
<element class="classname">
Valori di attributo
Value | Description |
---|---|
classname | Specifies one or more class names for an element. To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.
Naming rules:
|
Altri esempi
Esempio
Aggiungi più classi a un elemento HTML:
<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
color: blue;
text-align: center;
}
.important {
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
Esempio
Utilizzo di JavaScript per aggiungere un colore di sfondo giallo al primo elemento con class="example" (indice 0).
var x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";
Esempio
Utilizzo di JavaScript per aggiungere la classe "mystyle" a un elemento con id="myDIV":
document.getElementById("myDIV").classList.add("mystyle");
Pagine correlate
Esercitazione HTML: attributi HTML
Esercitazione CSS: sintassi CSS
Riferimento CSS: Selettore CSS .class
Riferimento HTML DOM: Metodo HTML DOM getElementsByClassName()
Riferimento HTML DOM: Proprietà HTML DOM className
Riferimento HTML DOM: Proprietà HTML DOM classList
Riferimento HTML DOM: Oggetto stile HTML DOM