jQuery Arkaplan (Background) Rengi Değiştirme

Bu örneğimizde jQuery ile sayfamızda bulunan öğelerin ve sayfa arkaplan (background) renginin değiştirilmesini sağlayacağız. jQuery ile CSS özelliklerine erişimin ve CSS özellikleri değişiminin nasıl yapılabileceğini örneği inceleyerek görebilirsiniz. Örneğimizde bir button vasıtasıyla sayfamızın arkaplan rengini ve sayfa içine eklemiş olduğumuz div öğelerinin arkaplan rengini değiştireceğiz. html sayfamıza ait kodlar:


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

    <style>
        div{
            padding: 20px;
            background-color: 
        }
    </style>
</head>
<body>

<h2>jQuery Dersleri </h2>

    <div id="kutu1">www.yazilimkodlama.com</div>
    <div id="kutu2">www.yazilimkodlama.com</div>
    <input type="button" id="btn1" value="TIKLA">

    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#kutu1").css({"background-color":"blue"});
                $("#kutu2").css({"background-color":"red"});
                $("body").css({"background-color":"aqua"});
            });
        });
    </script>
</body>
</html>