Elementin muokkaaminen
JavaScriptin avulla voi kätevästi muokata nettisivun ulkonäköä, kuten fontin väriä ja kokoa, taustavärejä tai vaikkapa asettelua.
Esimerkiksi painamalla tämän teksti alla olevaa painiketta saadaan tämä teksti reilusti isommaksi ja värikin erilaiseksi.
Alla on muutamia esimerkkikomentoja selityksineen. Komentoja on hyvin monia, joihin voit tutustua tarkemmin esimerkiksi w3schools.com-sivuilla.
document.getElementById('iidee').style.fontSize='150%'; |
Suurentaa kyseisen elementin sisältämää fonttia. |
document.getElementById('iidee').style.lineHeight='120%'; |
Suurentaa elementin riviväliä. |
document.getElementById('iidee').style.color = 'brown'; |
Muuttaa fontin värin ruskeaksi. |
document.getElementById('iidee').style.backgroundColor = 'yellow'; |
Muuttaa elementin taustavärin keltaiseksi. |
document.getElementById('iidee').style.border = '3px solid green'; |
Piirtää elementille vihreän reunan. |
document.getElementById('iidee').value = 'Moikka'; |
Muuttaa lomakekentän (esimerkiksi painikkeen tai tekstikentän) tekstiksi sanan "Moikka!". |
document.lomakkeennimi.kentännimi.value = 'Moikka'; |
Tämä tekee saman kuin edellinen. Tässä hyödynnetään lomakkeen ja kentän "name"-arvoja. |
getElementById('iidee').style.left = "100px"; |
Asettaa elementin niin, että sen vasen reuna on 100 pikseliä vasemmasta reunasta. Elementtien paikkaa voi muuttaa, jos elementillä on määritelty sijainti (position: absolute/fixed/relative). Etäisyyden yksikkö voi olla esimerkiksi %, px tai cm. Etäisyyden voi ilmoittaa ylhäältä (top), alhaalta (bottom), vasemmalta (left) tai oikealta (right) |
