Hai teman-teman semuanya? apa kabar? semoga tetap dalam keadaan sehat. masi semangat belajarnya? kita lanjut lagi yah belajarnya, pada pembahasan kali ini kita masi membahas seputar DOM javascript, kali ini kita akan membuat efek bold italic dan underline pada ms.word dengan javascript.
Oke langkah pertama silahkan teman-teman buat satu buah file dan ketikan script seperti berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>Word Javascript</title> <style type="text/css"> .bold{font-weight:bold;} .underline{text-decoration: underline} .italic{font-style: italic} </style> </head> <body> <p>Selamat Pagi juara</p> <button value='bold'>BOLD</button> <button value='underline'>UNDERLINE</button> <button value='italic'>ITALIC</button> </body> </html> |
Saya membuat 3 buah tombol yakn: bold, underline, italic lalu saya membuat satu text selamat pagi juara yang nantinya akan kita manipulasi,
jika sudah teman-teman coba jalankan pada browser, maka hasilnya adalah seperti berikut ini:
hasilnya belum terjadi apa-apa, nah sekarang kita akan membuat fungsi seperti ms.word ya teman-teman, silahkan teman-teman tambahkan script javascript seperti berikut ini :
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> var tombol = document.querySelectorAll('button'); var text = document.querySelector('p'); for(var i = 0; i < tombol.length; i++){ tombol[i].onclick = function(){ text.classList.toggle(this.value); } } </script> |
saya menggunakan classlist toggle untuk menambahkan dan menghapus class dan nilai classnya sendiri saya dapatkan dari value masing masing buttonnya, jika teman-teman jalankan pada browser hasilnya setiap tombol yang kita klik akan memberikan class yang mana classnya akan dibaca olec css sehingga memberikan style seprti yang kita mau,
Gimana teman-teman cukup mudah bukan? untuk tutorial kali ini tentang membuat efek bold italic dan underline pada ms.word dengan javascript semoga tutorial kali ini bermanfaat untuk teman-teman semuanya,
Terima kasih