Untuk artikel ini mungkin sudah banyak dibahas oleh kawan-kawan lainnya, dan mungkin tidak jauh berbeda. Kali ini adalah tutorial bagaimana cara merubah teks, style teksnya suatu elemen.
Di sini style teksnya dan teksnya elemen akan berubah ketika pointer mouse tepat di atas area elemen dan akan berubah kembali ketika pointer mouse meninggalkan area elemen, dan bisa dipastikan akan melibatkan dua atribut event, ONMOUSEOVER dan ONMOUSEOUT.
Di sini memerlukan:
- Dua buah fungsi, kedua fungsi ini masing-masing akan ditugaskan sebagai nilai dari kedua atribut event.
- Properti innerHTML untuk mengakses teks dari elemen, kemudian menggunakan style.color untuk memberikan stylenya.
Dan jangan lupa menggunakan metode getElementById() untuk mengakses ID dari elemen yang ingin diakses.
Berikut langkah-langkahnya:
- Tentukan teks dari elemen mana yang ingin dimanipulasi, untuk contoh ini adalah teks dari elemen H1.
Semisal seperti berikut:
<h1 id="HeadingID" onmouseover="" onmouseout="">Halo Dunia!</h1>Atribut ONMOUSEOVER dan ONMOUSEOUT di atas belum diberikan nilai, karena di sini belum ditentukan fungsi yang akan ditugaskan pada mereka.
- Berikutnya membuat fungsi, di sini dua fungsi dibuat, Over dan Out:
Out:
function Out() { var heading = document.getElementById("HeadingID"); heading.innerText = "Halo Dunia!"; heading.style.color = "black"; }Over:
function Over() { var heading = document.getElementById("HeadingID"); heading.innerText = "Hello World!"; heading.style.color = "green"; } - Berikutnya memberikan nilai atribut ONMOUSEOVER dan ONMOUSEOUT untuk elemen H1.
Seperti berikut:
<h1 id="HeadingID" onmouseover="Over()" onmouseout="Out()">Halo Dunia!</h11> - Selesai.
Untuk lebih jelasnya, jalankan kode di bawah ini, kemudian mouseover teks yang ada:
