Penelitian ini akan menggambarkan metode untuk mengubah warna teks dalam JavaScript.
Bagaimana Mengubah Warna Teks di JavaScript?
Untuk mengubah warna teks dalam JavaScript, gunakan metode JavaScript standar yang disebutkan di bawah ini:
- properti style.color dengan metode getElementById()
- properti style.color dengan metode querySelector()
Mari kita jelaskan metode ini satu per satu.
Metode 1: Ubah Warna Teks Menggunakan properti style.color dengan Metode getElementById()
Untuk mengubah warna teks, Anda dapat menggunakan tombol “ getElementById() ” metode dengan “ gaya.warna ' Properti. Dalam skenario seperti itu, elemen teks dapat diakses menggunakan metode getElementById() dan kemudian menerapkan atribut warna dengan bantuan properti style.color HTML.
Sintaksis
Gunakan sintaks yang diberikan untuk mengubah warna teks dengan menggunakan properti warna dengan bantuan metode getElementById() :
dokumen. getElementById ( 'Indo' ) . gaya . warna = 'warna' ;' Indo ” adalah id elemen yang ditentukan untuk mengakses elemen teks dan kemudian mengubah warnanya menggunakan properti style.color.
Arahkan ke contoh di bawah ini untuk memahami konsep yang disebutkan!
Contoh
Pertama, kita akan membuat heading menggunakan tag dan tetapkan id “ Indo ” yang digunakan untuk mengakses elemen h4, kemudian, buat tombol yang memanggil fungsi bernama “ ganti warna() ” didefinisikan dalam file JavaScript(JS) ketika event onclick dari tombol yang ditambahkan terpicu:
< h4 id = 'Indo' > Selamat datang di LinuxHint h4 >< jenis tombol = 'tombol' klik = 'ganti warna()' > Klik untuk Melihat Keajaiban tombol >
Dalam file JS, tentukan fungsi bernama “ ganti warna() ” dan dapatkan heading dengan meneruskan id-nya ke metode getElementById() dan kemudian ubah warnanya:
perubahan fungsi Warna ( ) {dokumen. getElementById ( 'Indo' ) . gaya . warna = 'merah' ;
}
Terakhir, tentukan sumber file JavaScript menggunakan tag src di file HTML:
< skrip src = './JSfile.js' > naskah >Dapat dilihat dari output bahwa ketika tombol tambah diklik, elemen teks berubah warna menjadi “ merah ”:
Mari kita periksa metode lainnya!
Metode 2: Ubah Warna Teks Menggunakan properti style.color dengan Metode querySelector()
Anda juga dapat mengubah warna teks menggunakan tombol “ kueriPemilih() ” dengan properti style.color. Itu mengakses elemen dengan id atau kelas yang ditetapkan sementara metode getElementById() hanya mengambil elemen dengan id yang ditetapkan.
Sintaksis
Gunakan sintaks berikut untuk mengubah warna teks menggunakan properti warna dengan bantuan metode querySelector():
dokumen. kueriPemilih ( 'id/namakelas' ) . gaya . warna = 'warna' ;Contoh
Di sini, kita akan menggunakan tag untuk menambahkan paragraf dengan kelas bernama “ warna ”, yang akan membantu untuk mengakses elemen
dan tombol yang akan memanggil JavaScript “ ganti warna() ” ketika acara onclick-nya akan dipicu:
< p kelas = 'warna' > Selamat datang di LinuxHint p >< tombol onclick = 'ganti warna()' > Klik untuk Melihat Keajaiban tombol >
Dalam definisi “ ganti warna() ”, kita akan memanggil “ kueriPemilih() ” dengan meneruskan nama kelas dengan titik (.) yang menunjukkan elemen diakses berdasarkan nama kelasnya, dan kemudian menerapkan properti warna di atasnya:
perubahan fungsi Warna ( ) {dokumen. kueriPemilih ( '.warna' ) . gaya . warna = 'Magenta' ;
}
Namun, untuk menggunakan id dalam elemen HTML dan mengaksesnya menggunakan metode querySelector(), tambahkan ' # ” tanda dengan nama id:
dokumen. kueriPemilih ( '#warna' ) . gaya . warna = 'Magenta' ;Keluaran
Kami telah mengumpulkan pendekatan paling sederhana untuk mengubah warna teks dalam JavaScript.
Kesimpulan
Untuk mengubah warna teks, Anda dapat menggunakan properti style.color dengan bantuan metode getElementById() atau metode querySelector(). Metode getElementById() digunakan untuk mengakses elemen HTML berdasarkan id yang ditetapkan, sedangkan metode querySelector() mengakses elemen berdasarkan id atau kelas yang ditetapkan dengan menentukan tanda (#) atau (.), masing-masing. Studi ini menggambarkan prosedur sederhana untuk mengubah warna teks dalam JavaScript.