首頁 > 文章 > web前端 > JavaScript實作點擊按鈕後更改背景顏色（兩種方法）

JavaScript實作點擊按鈕後更改背景顏色（兩種方法）

藏色散人原創: 2021-08-31 10:43:1416728瀏覽

在上一篇《透過JavaScript在單擊按鈕後更改標籤的href值》文章中給大家介紹了怎麼透過JavaScript實現在單擊按鈕後更改標籤的href值，感興趣的朋友可以學習了解~

那麼本文將繼續跟大家介紹如何使用JavaScript實作點擊按鈕後更改背景顏色。

下面我將介紹給大家兩個方法：

第一種方法

##註：這個方法使用JavaScript來改變點選按鈕後的背景顏色。點選按鈕後，使用HTML DOM Style backgroundColor 屬性變更背景顏色。此屬性用於設定元素的背景顏色。

程式碼如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

</head>

<body style = "text-align:center;">

<h1 style = "color:#ff311f;" >
    PHP中文网
</h1>

<p id = "GFG_UP" style =
        "font-size: 16px; font-weight: bold;">
</p>

<button onclick = "gfg_Run()">
    点击
</button>

<p id = "GFG_DOWN" style =
        "color:green; font-size: 20px; font-weight: bold;">
</p>

<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    var str = "单击按钮更改背景颜色";

    el_up.innerHTML = str;

    function changeColor(color) {
        document.body.style.background = color;
    }

    function gfg_Run() {
        changeColor(&#39;yellow&#39;);
        el_down.innerHTML = "背景颜色已改变";
    }
</script>
</body>

</html>

效果如下：

GIF 2021-8-31 星期二上午 10-35-16.gif

#第二個方法

這個方法使用jQuery來改變點擊按鈕後的背景顏色。 text() 方法用於將文字內容設定為所選元素；on() 方法用作所選元素和子元素的事件處理程序；css() 方法用於更改/設定元素的背景顏色。

程式碼如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src ="jquery.min.js"></script>
</head>

<body style = "text-align:center;">

<h1 style = "color:#ff7a03;" >
    PHP中文网
</h1>

<p id = "GFG_UP" style =
        "font-size: 16px; font-weight: bold;">
</p>

<button>
    点击
</button>

<p id = "GFG_DOWN" style =
        "color:#ff311f; font-size: 20px; font-weight: bold;">
</p>

<script>
    $(&#39;#GFG_UP&#39;).text("单击按钮更改背景颜色");
    $(&#39;button&#39;).on(&#39;click&#39;, function() {
        $(&#39;body&#39;).css(&#39;background&#39;, &#39;#45b1ff&#39;);
        $(&#39;#GFG_DOWN&#39;).text("背景颜色已改变");
    });
</script>
</body>

</html>

效果如下：

GIF 2021-8-31 星期二上午 10-38-57.gif

#大家也可以複製上述範例程式碼在本地進行測試！

最後給大家推薦《

JavaScript基礎教學》~歡迎大家學習~

以上是JavaScript實作點擊按鈕後更改背景顏色（兩種方法）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript jquery css html 事件 dom href

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：聊聊Node.js Buffer中的encoding（程式設計）下一篇：聊聊Node.js Buffer中的encoding（程式設計）

看更多