Tombol pengubah css dengan javascript

Agar dapat membuat suatu halaman web yang keren, terkadang tidak hanya dibutuhkan kemampuan untuk menuliskan baris kode css dan html saja. Tetapi kita juga membutuhkan senjata tambahan, yaitu javascript. Peran dari javascript itu sendiri adalah sebagai komponen pemrograman web. Jadi, html sebagai kerangka halaman web, css untuk memperindahnya dan javascript untuk memberikan kecanggihan pada sebuah halaman web.

Gambar dari kopidev.com

Dan pada kesempatan kali ini, admin bakal ngebahas tentang membuat tombol pengubah css dengan javascript. Tapi sebelumnya ini adalah tutorial pertama admin di blog ini tentang javascript. Sebelumnya admin sudah membahas beberapa tutorial css dan html yang dikemas dalam template blog. Dan untuk kali ini admin hanya akan menulis sedikit baris kode, dan kode yang akan admin tulis ini tidak bisa digunakan di blog. Tetapi manfaat dari kode ini adalah untuk pembelajaran.

Langsung saja, berikut adalah cara membuat tombol pengubah css dengan javascript.

Untuk script yang digunakan

<script>
var rataKiri=function(){
var x=document.getElementById("demo");
x.style.textAlign="left";
}
var rataTengah=function(){
var x=document.getElementById("demo");
x.style.textAlign="center";
}
</script>

Perintah document..getElementById berfungsi untuk mendapatkan elemen berdasarkan selektor id.
Dan x.style berfungsi sebagai pengubah css dari selektor id yang dipilih melalui document.getElementById.

Kemudian buatlah tombol seperti ini

<button type="button" onclick="rataKiri()">rata kiri</button>
<button type="button" onclick="rataTengah()">rata tengah</button>

Untuk memanggil fungsi di dalam <script></script>, maka di dalam button perlu ditambahkan onclick="" yang fungsinya adalah memberikan instruksi apa yang harus dilakukan apabila tombol tersebut diclick.

Lalu contoh teks, bisa teks sederhana seperti ini