回上頁 - 網頁JQuery語法

021、變更網頁背景色，加上轉場效果

1、範例事先準備

<script src="js/jquery-3.7.1.min.js"></script>

<style type="text/css">
button{
    font-size: 2rem;
}
</style>

<body style="font-size: 2.4rem; text-align: center;">

<p>
    <button id="red">紅色</button>
    <button id="orange">橘色</button>
    <button id="yellow">黃色</button>
    <button id="green">綠色</button>
    <button id="blue">藍色</button>
    <button id="purple">紫色</button>
</p>

</body>

<script type="text/javascript">
$(document).ready(function(){

});
</script>

2、實作目標：點選顏色按鈕，切換網頁背景色

 

<script>
$(document).ready(function(){

    $("button").on("click", function(){
        
    });

});
</script>

 

<script>
$(document).ready(function(){

    $("button").on("click", function(){
        
        alert($(this).attr("id"));
    });

});
</script>

 

<script>
$(document).ready(function(){

    $("button").on("click", function(){

        //alert($(this).attr("id"));
        //
        color = $(this).attr("id");                     //設定一個變數color 來儲存
        $("body").css("background-color", color);       //設定成<body>的背景色
    });
    
});
</script>

 

<style type="text/css">
button{
    font-size: 2rem;
}
body{
    transition-duration: 1s;
}
</style>

作品展示：

shape
shape