Kajian ini akan menggambarkan kaedah untuk menukar warna teks dalam JavaScript.
Bagaimana untuk Mengubah Warna Teks dalam JavaScript?
Untuk menukar warna teks dalam JavaScript, gunakan kaedah JavaScript pratakrif yang dinyatakan di bawah:
Mari jelaskan kaedah ini secara individu.
Kaedah 1: Tukar Warna Teks Menggunakan harta style.color dengan Kaedah getElementById().
Untuk menukar warna teks, anda boleh menggunakan “ getElementById() ' kaedah dengan ' gaya.warna ” harta benda. Dalam senario sedemikian, elemen teks boleh diakses menggunakan kaedah getElementById() dan kemudian gunakan atribut warna dengan bantuan HTML style.color property.
Sintaks
Gunakan sintaks yang diberikan untuk menukar warna teks dengan menggunakan sifat warna dengan bantuan kaedah getElementById():
dokumen. getElementById ( 'ID' ) . gaya . warna = 'warna' ;' ID ” ialah id elemen yang ditentukan untuk mengakses elemen teks dan kemudian menukar warnanya menggunakan sifat style.color.
Pergi ke contoh di bawah untuk memahami konsep yang dinyatakan!
Contoh
Pertama, kita akan membuat tajuk menggunakan tag dan berikan id ' ID ' yang digunakan untuk mengakses elemen h4, kemudian, buat butang yang memanggil fungsi bernama ' changeColor() ” ditakrifkan dalam fail JavaScript(JS) apabila peristiwa onclick pada butang yang ditambahkan dicetuskan:
< id h4 = 'ID' > Selamat datang ke LinuxHint h4 >< jenis butang = 'butang' onclick = 'changeColor()' > Klik untuk Lihat Keajaiban butang >
Dalam fail JS, tentukan fungsi bernama “ changeColor() ” dan dapatkan tajuk dengan menghantar idnya ke kaedah getElementById() dan kemudian tukar warnanya:
fungsi tukarWarna ( ) {dokumen. getElementById ( 'ID' ) . gaya . warna = 'merah' ;
}
Akhir sekali, nyatakan sumber fail JavaScript menggunakan tag src dalam fail HTML:
< skrip src = './JSfile.js' > skrip >Ia boleh dilihat daripada output bahawa apabila butang tambahan diklik, elemen teks menukar warnanya kepada ' merah ”:
Mari lihat kaedah lain!
Kaedah 2: Tukar Warna Teks Menggunakan harta style.color dengan Kaedah querySelector().
Anda juga boleh menukar warna teks menggunakan “ querySelector() ” kaedah dengan sifat gaya.warna. Ia mengakses elemen dengan kedua-dua id atau kelas yang ditetapkan manakala kaedah getElementById() hanya mengambil elemen dengan id yang ditetapkan.
Sintaks
Gunakan sintaks berikut untuk menukar warna teks menggunakan sifat warna dengan bantuan kaedah querySelector():
dokumen. querySelector ( 'id/className' ) . gaya . warna = 'warna' ;Contoh
Di sini, kami akan menggunakan tag untuk menambah perenggan dengan kelas bernama ' warna ”, yang akan membantu untuk mengakses elemen
dan butang yang akan memanggil JavaScript “ changeColor() ” kaedah apabila acara onclicknya akan dicetuskan:
< hlm kelas = 'warna' > Selamat datang ke LinuxHint hlm >< butang onclick = 'changeColor()' > Klik untuk Lihat Keajaiban butang >
Dalam definisi ' changeColor() ' kaedah, kami akan menggunakan ' querySelector() ” dengan menghantar nama kelas dengan titik(.) yang menunjukkan elemen diakses berdasarkan nama kelasnya, dan kemudian gunakan sifat warna padanya:
fungsi tukarWarna ( ) {dokumen. querySelector ( '.warna' ) . gaya . warna = 'Magenta' ;
}
Walau bagaimanapun, untuk menggunakan id dalam elemen HTML dan mengaksesnya menggunakan kaedah querySelector(), tambahkan “ # ” tandatangan dengan nama id:
dokumen. querySelector ( '#warna' ) . gaya . warna = 'Magenta' ;Pengeluaran
Kami telah mengumpulkan pendekatan paling mudah untuk menukar warna teks dalam JavaScript.
Kesimpulan
Untuk menukar warna teks, anda boleh menggunakan sifat style.color dengan bantuan kaedah getElementById() atau kaedah querySelector(). Kaedah getElementById() digunakan untuk mengakses elemen HTML berdasarkan id yang ditetapkan, manakala kaedah querySelector() mengakses elemen berdasarkan id yang ditetapkan atau kelas dengan menyatakan tanda (#) atau (.) masing-masing. Kajian ini menggambarkan prosedur mudah untuk menukar warna teks dalam JavaScript.