Memanipulasi Isi Dan Stylenya Suatu Elemen

Untuk artikel ini mungkin sudah banyak dibahas oleh kawan-kawan lainnya, dan mungkin tidak jauh berbeda. Kali ini ialah tutorial bagaimana cara merubah teks, style teksnya suatu elemen.

Di sini style teksnya dan teksnya elemen akan berubah dikala pointer mouse sempurna di atas area elemen dan akan berubah kembali dikala pointer mouse meninggalkan area elemen, dan dapat 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, lalu memakai style.color untuk menawarkan stylenya.

Dan jangan lupa memakai metode getElementById() untuk mengakses ID dari elemen yang ingin diakses.

Berikut langkah-langkahnya:

1. Tentukan teks dari elemen mana yang ingin dimanipulasi, untuk pola ini ialah teks dari elemen H1.

   Semisal menyerupai berikut:

   <h1 id="HeadingID" onmouseover="" onmouseout="">Halo Dunia!</h1>

   Atribut ONMOUSEOVER dan ONMOUSEOUT di atas belum diberikan nilai, alasannya ialah di sini belum ditentukan fungsi yang akan ditugaskan pada mereka.

2. 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"; }
3. Berikutnya menawarkan nilai atribut ONMOUSEOVER dan ONMOUSEOUT untuk elemen H1.

   Seperti berikut:

   <h1 id="HeadingID" onmouseover="Over()" onmouseout="Out()">Halo Dunia!</h11>
4. Selesai.

Untuk lebih jelasnya, jalankan instruksi di bawah ini, lalu mouseover teks yang ada: