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="p2 ">Nelayan Kode</h1>
JavaScript
document.getElementById("p2 ").style.color
= "blue ";
Live Demo »
Mengganti Nilai dari Turunan Property
Contoh Property CSS dan Turunannya
Property CSS
Turunan Property CSS
margin-top :
margin-right :
margin-bottom :
margin-left :
margin-
margin-
margin-
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 :
margin
margin
margin
Contoh:
HTML
<h1 id="p2 ">Nelayan Kode</h1>
JavaScript 1
document.getElementById("p2 ").style.margin
= "0 0 0 50px ";
JavaScript 2
document.getElementById("p2 ").style.marginLeft
= "50px ";
Untuk Kode JavaScript 1 dan JavaScript 2 hasilnya sama. Hanya saja untuk kasus di atas penulisan kode JavaScript 2 lebih jauh lebih sederhana.
Live Demo »
Post a Comment