JavaScript HTML DOM perubahan CSS
HTML DOM memungkinkan JavaScript untuk mengubah gaya elemen HTML.
gaya perubahan HTML
Untuk mengubah gaya elemen HTML, gunakan sintaks ini:
document.getElementById(id).style.property=新样式
Contoh berikut akan mengubah gaya <p> elemen:
contoh
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> Tutorial ini (w3big.com) </ title>
</ Kepala>
<Body>
<P id = "p1"> Hello World ! </ p>
<P id = "p2"> Hello World ! </ p>
<Script> document.getElementById ( "p2" ) style.color = "biru" ;. document.getElementById ( "p2") style.fontFamily = "Arial"; .. document.getElementById ( "p2") style.fontSize = "lebih besar"; </ script>
<P> naskah dengan memodifikasi paragraf di atas. </ P>
</ Body>
</ Html>
Coba »
Gunakan Event
HTML DOM memungkinkan kita untuk mengeksekusi kode dengan memicu peristiwa.
Sebagai contoh, berikut acara:
- Elemen diklik.
- Halaman beban.
- kotak input dimodifikasi.
- ......
Pada bagian berikut, Anda akan belajar lebih banyak tentang pengetahuan acara.
Contoh ini mengubah gaya id = "ID1" elemen HTML, ketika pengguna mengklik tombol:
contoh
<! DOCTYPE html>
<Html>
<Body>
<H1 id = "ID1"> My menuju 1 </ h1>
<Jenis Tombol = "tombol"
onclick = "document.getElementById ( 'ID1'). style.color = 'red'">
Mengarahkan saya! </ Tombol>
</ Body>
</ Html>
<Html>
<Body>
<H1 id = "ID1"> My menuju 1 </ h1>
<Jenis Tombol = "tombol"
onclick = "document.getElementById ( 'ID1'). style.color = 'red'">
Mengarahkan saya! </ Tombol>
</ Body>
</ Html>
Coba »
contoh yang lebih
jarak penglihatan
Cara membuat elemen tak terlihat. Elemen yang ingin ditampilkan atau menghilang?