Artikel ini menjelaskan metode JavaScript untuk mengubah latar belakang dan warna font dari halaman web. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
JavaScript, dengan mengklik tombol untuk mengubah warna latar belakang halaman web dan font. Ada N tombol untuk mengubah warna di halaman web. Mengklik tombol yang berbeda, font dan latar belakang halaman web akan berubah menjadi warna yang berbeda. Applet JavaScript yang sangat sederhana.
1. Tujuan Dasar
Segera setelah Anda membuka halaman web, pertama -tama Anda akan meminta pesan salam "Halo"
Ada N tombol untuk mengubah warna di halaman web, di mana pengembalian adalah warna default dari halaman web, latar belakangnya putih, dan fontnya hitam.
Klik tombol yang berbeda, dan font dan latar belakang halaman web akan berubah menjadi warna yang berbeda.
Saya awalnya ingin membuat perbaikan pelangi, tetapi prinsipnya persis sama, jadi saya tidak akan menulis lebih banyak tombol.
2. Ide Dasar
Kuncinya adalah menyediakan ID untuk tag tubuh dan font JS sehingga dapat dikontrol dalam JS. Contoh ini menyediakan aplikasi untuk fungsi JS.
3. Proses Produksi
Hanya halaman kecil sederhana, silakan lihat komentar untuk detailnya:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten-tipe" content = "text /html; charset = gb2312" />
<title> js mengubah warna latar belakang </iteme>
<!-Paragraf ini juga dapat dipisahkan menjadi file JS, tetapi kode ini terlalu pendek, jadi tidak perlu->
<type skrip = "Teks/JavaScript">
// Onload setara dengan konstruktor halaman web ini, dan onunload setara dengan fungsi disjungsi halaman web ini
function load () {
waspada ("halo!");
}
fungsi bongkar () {
waspada ("Selamat tinggal!");
}
function changeColor (bcolor, fcolor) {
// setara dengan mengubah warna font untuk font <span style = "color: lulus fcolor">
document.geteLementById ("body"). style.background = bcolor;
document.geteLementById ("ziti"). style.color = fcolor;
}
</script>
</head>
<!-Kuncinya adalah menyediakan ID untuk seluruh halaman web dan font baris. Metode getElementById () dalam JS dapat dengan mudah mengontrol hal-hal di CSS->
<body onload = "load ()" onunload = "unload ()" id = "body">
<span id = "ziti"> js </span>
<br />
<!-Perhatikan bahwa ketika melewati parameter dalam kutipan ganda, kutipan ganda asli akan menjadi kutipan tunggal. Nilai OnClick adalah sesuatu yang akan dipicu setelah tombol ini diklik->
<input onClick = "changeColor ('#ff0000', '#ffffff')" type = "tombol"
nilai = "merah" />
<input onClick = "changeColor ('#ff9900', '#ffffff')" type = "tombol"
value = "oranye" />
<input onClick = "changeColor ('#ffff00', '#000000')" type = "tombol"
nilai = "kuning" />
...
<input onClick = "changeColor ('#ffffff', '#000000')" type = "tombol"
value = "return" />
</body>
</html>
Fungsi onunload () hampir hanya valid ketika IE menutup halaman ini, dan kotak dialog ini tidak akan berada di ujung depan, dan Google Chrome tidak berpengaruh. Oleh karena itu, fungsi ini memiliki sedikit signifikansi.
Teman yang tertarik dengan keterampilan operasi warna JS juga dapat merujuk pada alat online:
Generator penyandian warna RGB
Alat pencocokan warna web online
RGB Color Query Perbandingan Table_color Code Table_Colour Koleksi Nama Bahasa Inggris
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.