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

Menambah User Centos 7

Date : 28 Sep 2018, Category : Server, Create By : admin

Materi ini adalah materi pertama dalam kategori baru yaitu server, di kategori ini kita akan membahas mengenai konfigurasi server, sebagai programmer adakalanya kita di tuntut untuk mengetahui sedikit mengenai konfihurasi .....

Mengenal Dan Membuat Form Input Data, Text, Number, Dan Password

Date : 01 Sep 2018, Category : Belajar HTML, Create By : admin

Selamat datang kembali di website gudang ilmu aplikasi, kali ini kami akan membahas mengenai cara membuat form input data text, form input data number dan form input data password. Form .....

Fungsi Css Float

Date : 08 Aug 2018, Category : Belajar CSS, Create By : admin

Dalam script css banyak sekali propertis di dalamnya, seperi backgroud, color, dll, tapi sekarang kita akan membahas tentang propertis css Float, Float dalam bahasa Indonesia artinya adalah mengapung jadi Fungsi Float .....