JavaScript melaksanakan perubahan warna latar belakang selepas mengklik butang (dua kaedah)-tutorial js-php.cn

JavaScript melaksanakan perubahan warna latar belakang selepas mengklik butang (dua kaedah)

藏色散人

Lepaskan： 2021-08-31 10:43:14

asal

16833 orang telah melayarinya

Dalam artikel sebelumnya "Tukar nilai href label selepas mengklik butang melalui JavaScript", saya memperkenalkan kepada anda cara menukar nilai href label selepas mengklik butang melalui JavaScript Rakan boleh belajar mengenainya ~

Kemudian artikel ini akan terus memperkenalkan kepada anda cara menggunakan JavaScript untuk menukar warna latar belakang selepas mengklik butang.

Saya akan memperkenalkan anda kepada dua kaedah di bawah:

Kaedah pertama

Nota: Kaedah ini menggunakan JavaScript untuk menukar warna latar belakang apabila butang diklik. Gunakan sifat HTML DOM Style backgroundColor untuk menukar warna latar belakang selepas butang diklik. Sifat ini digunakan untuk menetapkan warna latar belakang elemen.

Kod adalah seperti berikut:

<!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>

Salin selepas log masuk

Kesannya adalah seperti berikut:

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

Yang kedua kaedah

Kaedah ini menggunakan jQuery untuk menukar warna latar belakang butang selepas mengkliknya. Kaedah text() digunakan untuk menetapkan kandungan teks kepada elemen yang dipilih; kaedah on() digunakan sebagai pengendali peristiwa untuk elemen yang dipilih dan kaedah css() digunakan untuk menukar/menetapkan warna latar belakang daripada unsur tersebut.

Kod adalah seperti berikut:

<!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>

Salin selepas log masuk

Kesannya adalah seperti berikut:

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

Anda juga boleh menyalin kod sampel di atas untuk menguji secara tempatan!

Akhir sekali, saya ingin mengesyorkan "Tutorial Asas JavaScript"~ Selamat datang semua untuk belajar~

Atas ialah kandungan terperinci JavaScript melaksanakan perubahan warna latar belakang selepas mengklik butang (dua kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!