HTML klas kenmerk
Die HTML class-kenmerk word gebruik om 'n klas vir 'n HTML-element te spesifiseer.
Veelvuldige HTML-elemente kan dieselfde klas deel.
Gebruik die klaskenmerk
Die classkenmerk word dikwels gebruik om na 'n klasnaam in 'n stylblad te wys. Dit kan ook deur 'n JavaScript gebruik word om toegang tot elemente met die spesifieke klasnaam te verkry en te manipuleer.
In die volgende voorbeeld het ons drie <div>elemente met 'n classkenmerk met die waarde van "stad". Al die drie <div>
elemente sal ewe gestileer word volgens die .city
styldefinisie in die hoofafdeling:
Voorbeeld
<!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>
In die volgende voorbeeld het ons twee <span>elemente met 'n classkenmerk met die waarde van "noot". Beide <span>
elemente sal ewe gestileer word volgens die .note
styldefinisie in die hoofafdeling:
Voorbeeld
<!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>
Wenk: Die classkenmerk kan op enige HTML-element gebruik word.
Let wel: Die klasnaam is hooflettersensitief!
Wenk: Jy kan baie meer oor CSS leer in ons CSS-tutoriaal .
Die sintaksis vir klas
Om 'n klas te skep; skryf 'n punt (.) karakter, gevolg deur 'n klasnaam. Definieer dan die CSS-eienskappe binne krullerige hakies {}:
Voorbeeld
Skep 'n klas met die naam "stad":
<!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>
Veelvuldige klasse
HTML-elemente kan aan meer as een klas behoort.
Om veelvuldige klasse te definieer, skei die klasname met 'n spasie, bv <div class="city main">. Die element sal volgens al die gespesifiseerde klasse gestileer word.
In die volgende voorbeeld behoort die eerste <h2>element aan beide die
cityklas en ook aan die mainklas, en sal die CSS-style van beide die klasse kry:
Voorbeeld
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
Verskillende elemente kan dieselfde klas deel
Verskillende HTML-elemente kan na dieselfde klasnaam verwys.
In die volgende voorbeeld wys beide <h2>en <p>
na die "stad"-klas en sal dieselfde styl deel:
Voorbeeld
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
Gebruik van die klaskenmerk in JavaScript
Die klasnaam kan ook deur JavaScript gebruik word om sekere take vir spesifieke elemente uit te voer.
JavaScript het toegang tot elemente met 'n spesifieke klasnaam met die getElementsByClassName()metode:
Voorbeeld
Klik op 'n knoppie om alle elemente met die klasnaam "stad" te versteek:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
Moenie bekommerd wees as jy nie die kode in die voorbeeld hierbo verstaan nie.
Jy sal meer oor JavaScript leer in ons HTML JavaScript -hoofstuk, of jy kan ons JavaScript-tutoriaal bestudeer .
Hoofstuk Opsomming
- Die HTML
class-kenmerk spesifiseer een of meer klasname vir 'n element - Klasse word deur CSS en JavaScript gebruik om spesifieke elemente te kies en toegang te verkry
- Die
classkenmerk kan op enige HTML-element gebruik word - Die klasnaam is hooflettersensitief
- Verskillende HTML-elemente kan na dieselfde klasnaam verwys
- JavaScript het toegang tot elemente met 'n spesifieke klasnaam met die
getElementsByClassName()metode