Home
CSS
JavaScript

Mengubah Nilai Property CSS dengan Menggunakan JavaScript

Pemberian nilai pada property CSS biasanya dilakukan sebelum program dijalankan. Adapun ketika program dijalankan maka nilai property dapat diubah menggunakan kode JavaScipt .

Mengganti Style HTML

Untuk mengganti style dari sebuah elemen HTML, gunakan sintaks berikut:
Sintaks :
document.getElementById(id).style.property = new_style
Contoh :
HTML
<h1 id="myH1">Nelayan Kode</h1>
JavaScript
document.getElementById("myH1").style.color = "red";
Run Code

Mengganti Nilai dari Turunan Property

Contoh Property CSS dan Turunannya
Property CSS
margin:
Turunan Property CSS
margin-top:
margin-right:
margin-bottom:
margin-left:

Untuk turunan properti maka penulisan property nya adalah dengan menghapus tanda "-" dan untuk kata kedua huruf awalnya diubah menjadi huruf kapital. Misalkan turunan dari property margin yakni margin-left diubah menjadi marginLeft.

Penulisan Turunan dari Property margin pada JavaScript
marginTop:
marginRight:
marginBottom:
marginLeft:
Contoh :
HTML
<h1 id="demo">Hello World!</h1>
JavaScript 1
document.getElementById("demo").style.margin = "0 0 0 50px";
JavaScript 2
document.getElementById("demo").style.marginLeft = "50px";

Pada contoh kasus di atas jika menggunakan kode JavaScript 1 maupun yang JavaScript 2 maka hasilnya akan tetap sama. Hanya saja untuk kasus di atas penulisan kode JavaScript 2 lebih jauh lebih sederhana jika ingin mengubah margin secara spesifik.

Demikian tutorial kali ini, jangan lupa untuk dishare jika Anda merasa artikel ini bermanfaat. Dan jika ada penjelasan yang kurang dimengerti dari artikel di atas silahkan tanyakan pada kolom komentar di bawah.

Post a Comment

  1. Komentar ini, diurutkan dari yang terlama
  2. Tinggalkan komentar sesuai topik tulisan
  3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Out off topic
  4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
  5. Untuk menghapus komentar, hanya dapat dilakukan oleh admin.
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.