jQuery - Get i Set CSS svojstva


jQuery css() metoda

jQuery css() metoda koristi se za dobijanje izračunate vrijednosti CSS svojstva ili postavljanje jednog ili više CSS svojstava za odabrane elemente. Ova metoda pruža brzi način primjene stilova direktno na HTML elemente (tj. umetnute stilove) koji nisu ili nisu lako definisani u tabeli stilova.



Dobijanje (Get) CSS vrijednosti svojstva

Izračunatu vrijednost svojstva CSS-a elementa možete dobiti jednostavnim prosljeđivanjem imena svojstva kao parametra metodi css(). Evo osnovne sintakse:

$(selector).css("propertyName");

Sljedeći primjer će dohvatiti i prikazati izračunatu vrijednost CSS svojstva pozadine boje (background-color) elementa <div>, kada se na njega klikne.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Dobijanje (Get) vrijednost CSS svojstva</title>
<style>
    div{
        width: 100px;
        height: 100px;
        margin: 10px;
        cursor: pointer;
        display: inline-block;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("div").click(function(){
        var color = $(this).css("background-color");
        $("#result").html(color);
    });    
});
</script>
</head>
<body>
    <div style="background-color:orange;"></div>
    <div style="background-color:#ee82ee;"></div>
    <div style="background-color:rgb(139,205,50);"></div>
    <div style="background-color:#f00;"></div>
    <p>Izračunata vrijednost svojstva pozadinske boje za ovaj DIV element je: <b id="result"></b></p>
</body>
</html>


Postavljanje (Set) jednog svojstvo i vrijednost CSS-a

Metoda css() može uzeti ime i vrijednost svojstva kao zasebne parametre za postavljanje jednog CSS svojstva za elemente. Osnovna sintaksa može se napisati kao:

$(selector).css("propertyName", "value");

Sljedeći primjer će postaviti CSS svojstvo pozadinske boje (background-color) elemenata <div> na vrijednost plava boje kada se na nju klikne.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Postavljanje (Set) vrijednosti za CSS svojstvo</title>
<style>
    .box{
        width: 100px;
        height: 100px;
        margin: 10px;
        cursor: pointer;
        border: 1px solid #cdcdcd;
        display: inline-block;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".box").click(function(){
        $(this).css("background-color", "blue");
    });    
});
</script>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <p><strong>Napomena:</strong> Kliknite unutar praznog okvira da popunite pozadisku boju.</p>
</body>
</html>


Postavljanje (Set) više CSS svojstava i vrijednosti

Takođe možete postaviti više CSS svojstava metodom css(). Osnovna sintaksa za postavljanje više svojstava za elemente može se napisati kao:

$(selector).css({"propertyName":"value", "propertyName":"value", ...});

Sljedeći primjer će istovremeno postaviti pozadinsku boju (background-color), kao i svojstvo dodavanja CSS-a za odabrane elemente.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Postavljanje (Set) vrijednosti višestrukih CSS svojstava</title>
<style>
    p{
        font-size: 18px;
        font-family: Arial, sans-serif;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").css({"background-color": "yellow", "padding": "20px"});
    });    
});
</script>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p style="background-color:orange;">Volim da učim jQuery.</p>
    <p style="background-color:#ee82ee;">Volim da učim HTML5-CSS3.</p>
    <p style="background-color:rgb(139,205,50);">Volim da učim JavaScript.</p>
    <p>Volim da učim PHP-MySQL.</p>
    <button type="button">Dodavanje CSS stila</button>
</body>
</html>