butang klik javascript untuk menukar warna teks

Dengan pembangunan berterusan Internet dan reka bentuk web, JavaScript telah menjadi bahagian penting dalam pembangunan bahagian hadapan. Fungsi dan fleksibilitinya yang berkuasa boleh menjadikan halaman web lebih interaktif dan dinamik. Dalam artikel ini, kita akan belajar cara menukar warna teks butang menggunakan JavaScript.

1. Buat butang dalam HTML
Mula-mula, buat label butang dalam HTML dan namakannya "changeColorBtn":

Klik untuk menukar warna teks

2. Gunakan JavaScript untuk menukar warna
Seterusnya, kita perlu menggunakan JavaScript untuk menulis fungsi untuk menukar warna teks. Dalam JavaScript, kita boleh menggunakan kaedah document.getElementById() untuk mendapatkan elemen butang mengikut id. Kemudian kita boleh menggunakan sifat style.color untuk menukar warna teks. Berikut ialah contoh kod:

function changeTextColor() {
var btn = document.getElementById("changeColorBtn");
btn.style.color = "red";
}

Dalam contoh ini, kami mentakrifkan pembolehubah bernama "btn" dalam fungsi dan menetapkannya sebagai rujukan kepada elemen "changeColorBtn". Kami kemudian menggunakan sifat style.color untuk menukar warna teks butang kepada merah.

3. Tukar warna latar belakang butang
Perlu diingatkan bahawa kita tidak boleh menukar warna latar belakang butang hanya melalui kaedah di atas. Dalam JavaScript, kita boleh menggunakan sifat style.backgroundColor. Berikut ialah contoh kod:

function changeBackgroundColor() {
var btn = document.getElementById("changeColorBtn");
btn.style.backgroundColor = "blue";
}

Dalam contoh ini, kami menukar warna latar belakang butang kepada biru dengan menukar style.color kepada style.backgroundColor.

4 Gunakan warna rawak
Jika kita ingin menukar teks dan warna latar belakang butang kepada warna rawak, kita boleh menggunakan kaedah Math.random() JavaScript dalam fungsi untuk menghasilkan warna rawak . Berikut ialah contoh kod:

function changeRandomColor() {
var btn = document.getElementById("changeColorBtn");
var letters = "0123456789ABCDEF";
var color = "# " ;
untuk (var i = 0; i < 6; i++) {

color += letters[Math.floor(Math.random() * 16)];

}
btn.style.color = color;
btn.style.backgroundColor = color;
}

Dalam contoh ini, kami mentakrifkan tiga pembolehubah dalam fungsi: btn, huruf dan warna. Kami kemudian menggunakan gelung for untuk menjana nilai warna rawak enam bit. Akhir sekali, kami memberikan nilai warna rawak kepada sifat style.color dan style.backgroundColor masing-masing.

5. Ringkasan
Melalui langkah di atas, kami boleh menggunakan JavaScript untuk menukar warna teks, warna latar belakang dan juga menjana warna rawak butang. Melalui JavaScript, kami boleh menjadikan halaman web lebih interaktif dan dinamik.

Atas ialah kandungan terperinci butang klik javascript untuk menukar warna teks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!