Download Source Code Aplikasi

Memanipulasi Isi Dan Stylenya Suatu Elemen

Monday, November 25th, 2019 - Artikel HTML DOM

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:

<html> <body> <script> function Out() { var heading = document.getElementById("HeadingID"); heading.innerText = "Halo Dunia!"; heading.style.color = "black"; } function Over() { var heading = document.getElementById("HeadingID"); heading.innerText = "Hello World!"; heading.style.color = "green"; } </script> <h1 id="HeadingID" onmouseover="Over()" onmouseout="Out()">Halo Dunia!</h11> </body> </html>
Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.
(Telah didownload 18 kali, 1x didownload hari ini)
Download Source Code Aplikasi
Memanipulasi Isi Dan Stylenya Suatu Elemen | Ahmad Code | 4.5

Hosting Unlimited Indonesia