Lezione #id-jq-2013-0008#
Con JQuery possiamo aggiungere e rimuovere al volo le classi CSS..
Metodo: addClass()-removeClass()-toggleClass() -> aggiungi, rimuovi, alterna classe CSS
Vediamo la sintassi corretta:
/* AGGIUNGE AGLI ELEMENTI LA CLASSE */
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
/* AGGIUNGE CLASSI MULTIPLE CSS */
$("button").click(function(){
$("#div1").addClass("important blue");
});
/* RIMUOVE CLASSI CSS */
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
/* ALTERNA CLASSI CSS */
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
Vediamo un’applicazione pratica.
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("#aggiungiclasse").click(function(){
$("h1,p").addClass("blu");
});
$("#aggiungiclassi").click(function(){
$("h1,p").addClass("importante sottolineato");
});
$("#alternaclassi").click(function(){
$("h1,p").toggleClass("spaziatura");
});
$("#rimuoviclassi").click(function(){
$("h1,p").removeClass("blu importante sottolineato spaziatura");
});
});
</script>
<style type="text/css">
.importante
{
font-weight:bold;
font-size:xx-large;
}
.blu
{
color:blue;
}
.sottolineato
{
text-decoration:underline;
}
.spaziatura
{
letter-spacing:4px;
}
</style>
</head>
<body>
<h1>Questo è un tag h1</h1>
<p>Questo è un paragrafo.</p>
<button id="aggiungiclasse">Aggiungi Classe</button><br><br>
<button id="aggiungiclassi">Aggiungi Classi</button><br><br>
<button id="alternaclassi">Alterna Classi</button><br><br>
<button id="rimuoviclassi">Rimuovi Classi</button>
</body>
</html>
