jQuery - Dodavanje i uklanjanje CSS klasa


jQuery CSS Manipulacija klasama

jQuery nudi nekoliko metoda, poput: addClass(), removeClass(), toggleClass() itd. za manipulaciju CSS klasama koje su dodijeljene HTML elementima.



jQuery addClass() metoda

jQuery metoda addClass() dodaje jednu ili više klasa odabranim elementima. Sljedeći primjer će dodati klasu .page-header na element <h1>, a klasu .haghlight elementima <p> s klasom .hint klikom na dugme.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dodavanje klase elementima u jQuery-ju</title>
<style>
    .page-header{
        color: red;
        text-transform: uppercase;
    }
    .highlight{
        background: yellow;
    }
    .hint{
        font-style: italic;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1").addClass("page-header");
        $("p.hint").addClass("highlight");
    });
});
</script>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim učiti jQuery uz IT TUTORIJALE...</p>
    <p class="hint"><strong>Savjet:</strong> Uči svaki dan jQuery :) .</p>
    <button type="button">Dodaj klasu</button>
</body>
</html>

Takođe možete elementima istovremeno dodati i više klasa. Samo odredite razmak na popisu klasa unutar metode addClass(), ovako:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dodavanje više klasa elementima u jQuery-ju</title>
<style>
    .page-header{
        color: red;
        text-transform: uppercase;
    }
    .highlight{
        background: yellow;
    }
    .hint{
        font-style: italic;
    }         
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1").addClass("page-header highlight");
    });
});
</script>
</head>
<body>
    <h1>It tutorijali</h1>
    <p>Volim učiti jQuery uz IT TUTORIJALE.</p>
    <button type="button">Dodaj klasu</button>
</body>
</html>


jQuery removeClass() metoda

Takođe možete ukloniti klase iz elemenata pomoću jQuery metode removeClass(). Metoda removeClass() može iz odabranih elemenata ukloniti jednu klasu, više klasa ili sve klase odjednom. Sljedeći primjer će ukloniti klasu .page-header iz elementa <h1>, a klasu .hint i .highlight iz elemenata <p> klikom na dugme.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Uklanjanje klasa iz elemenata u jQuery-ju</title>
<style>
    .page-header{
        color: red;
        text-transform: uppercase;
    }
    .highlight{
        background: yellow;
    }
    .hint{
        font-style: italic;
    } 
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1").removeClass("page-header");
        $("p").removeClass("hint highlight");
    });
});
</script>
</head>
<body>
    <h1 class="page-header">IT TUTORIJALI</h1>
    <p>Volim učiti jQuery uz IT TUTORIJALE...</p>
    <p class="hint highlight"><strong>Savjet:</strong> Uči jQuery svaki dan :) .</p>
    <button type="button">Ukloni klasu</button>
</body>
</html>

Kada se metoda removeClass() pozove bez argumenta, ukloniće sve klase iz odabranih elemenata. Pogledajmo primjera:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Uklanjanje svih klasa iz elemenata u jQuery-ju</title>
<style>
    .page-header{
        color: red;
        text-transform: uppercase;
    }
    .highlight{
        background: yellow;
    }
    .hint{
        font-style: italic;
    }      
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1").removeClass();
        $("p").removeClass();
    });
});
</script>
</head>
<body>
    <h1 class="page-header">IT TUTORIJALI</h1>
    <p>Volim učiti jQuery uz IT TUTORIJALE...</p>
    <p class="hint highlight"><strong>Savjet:</strong> Uči jQuery svaki dan :) .</p>
    <button type="button">Ukloni klase</button>
</body>
</html>


jQuery toggleClass() metoda

jQuery toggleClass() metoda dodaje ili uklanja jednu ili više klasa iz odabranih elemenata na takav način da se, ako odabrani element već ima klasu, uklanja, a ako element nema klasu, tada se dodaje, tj. prebacuje klase.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Prebacivanje klasa elemenata u jQuery</title>
<style>
    p{
        padding: 10px;
        cursor: pointer;        
        font: bold 16px sans-serif;
    }
    .highlight{
        background: yellow;
    }         
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).toggleClass("highlight");
    });
});
</script>
</head>
<body>
    <p>Klikni na mene i pokreni pozadinsku boju.</p>
    <p class="highlight">Klikni na mene i pokreni pozadinsku boju.</p>
    <p>Klikni na mene i pokreni pozadinsku boju.</p>
</body>
</html>

Više o manipulaciji CSS svojstvima naučićete u sljedećoj lekciji