jQuery Tıklanan Kutunun Rengini Değiştirme

Bu örneğimizde jQuery ile CSS özelliği değiştirmeyle ilgili bir örnek oluşturacağız. Sayfamıza eklediğimiz color nesnesini kullanarak seçtiğimiz rengin, sayfamıza div etiketi ile eklemiş olduğumuz kutuların üzerine tıklandığında renk değiştirmesini sağlayacağız.

Yukarıdaki sayfayı oluşturmak için gerekli kodları html dosyası oluşturarak Kopyala – Yapıştır yöntemiyle deneyebilirsiniz.


<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <title>Jquery Örnekler</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style>
        .kutu {
            width: 200px;
            height: 200px;
            float: left;
            border: #000 solid 2px;
            margin: 3px;
        }
    </style>

    
</head>
 
<body>
    <input type="color" id="renk">
    <br>
    <div class="kutu"></div>
    <div class="kutu"></div>
    <div class="kutu"></div>
    <div class="kutu"></div>
    <div class="kutu"></div>
    <div class="kutu"></div>
    <div class="kutu"></div>
    <div class="kutu"></div>
    <div class="kutu"></div>
    <div class="kutu"></div>
    
    <script>
        $(document).ready(function() {
            $(".kutu").click(function() {
                var secilenrenk = $("#renk").val();
                $(this).css("backgroundColor", secilenrenk);
            });
        });
    </script>
</body>
</html>