Menambah Style Css Dengan Javascript

Tanggal : 10 Sep 2018, Category : Belajar JavaScript, Create By : admin

Hai brow, selamat datang kembali di wesbite gudang ilmu aplikasi, kali ini kami akan membahas tentang javascript dan style css, yang kami beri judul menambah style css dengan javascript, dua bahasa pemprograman ini pastinya sering di pake dalam pembuatan aplikasi, dan sekarang kita akan mengabungkan kedua bahasa pemprograman ini, untuk fungsi dari javascript sendiri nantiny akan mengirim atau menambah style css kedalam element yang dituju.

Menambah style css dengan javascript di gunakan jika dalam pembuatan aplikasi anda membutuhkan style css yang flexsibel atau bisa berubah rubah sesuai fungsi atau logika yang sudah anda tentukan. Berikut contoh penggunaan javascript untuk mengeset style ke dalam tag html.

<p id="coba">Menambah Style Css Dengan Javascript</p>
<script>
function goRubah() {
var z = document.getElementById("coba");
z.style.fontSize = "30px";
z.style.color = "blue";
}
</script>
<button onclick="goRubah()">Rubah</button>

Dalam pembuatan aplikasi menggunakan javascript anda harus memberikan id atau class, untuk mempermudahkan dalam pengambilan element tersebut, dari contoh di atas tag <p> kami beri id dengan id="coba" yang nantinya di dalam function akan di panggil dan akan di set style ke dalam nama id tersebut,

Keterangan :

var z = document.getElementById("coba"); : mengambil atau mencari tag element html yang ber id coba

z.style.fontSize = "30px"; menambah style fontsize ke dalam variabel dimana  adalah tag html ber id coba

dengan script diatas tag html yang ber id coba akan diberi style fontsize dan color, maka ketika tombol rubah di klik akan merubah tampilan <p> menjadi

Sebelum Klik tombol Rubah

Sesudah Klik tombol Rubah


Keyword:
  • menambah style css dengan javascript
  • style css javascript
  • javascript css

Artikel Lain

Membuat Encode Dan Decoded Php

Date : 01 Jan 2019, Category : Tutorial, Create By : admin

Selamat datang di website gudang ilmu aplikasi, kali ini kami akan membahas mengenai encode dan decode menggunakan bahasa pemprogaman php yang pertama kita akan membahas mengenai encode. Encode Encode adalah sebuah algoritma .....

Cara Membuat Alert, Confirm Dan Prompt Dengan Javascript

Date : 11 Aug 2018, Category : Belajar JavaScript, Create By : admin

Selamat datang kembali di website gudang ilmu aplikasi, kali ini kami akan membahas tentang membuat alert, confirm dan prompt dengan javasript, fungsi dari ketiga fungsi diatas semuanya adalah untuk membuat .....

Cara Agar Tanda Petik Bisa Tersimpan Di Database

Date : 09 Jan 2019, Category : Tutorial, Create By : admin

Selamat datang di gudang ilmu aplikasi, kali ini kami akan membahas cara agar tanda petik bisa tersimpan di database, pasti bagi anda yang pernah membuat aplikasi pernah mengalami error ketika .....