CSS ja JS voidaan liittää toimimaan yhdessä suhteellisen helpoillakin tavoilla muistaen id-tunnisteen olevan varattu JavaScript:lle, jolloin CSS-ohjeet on liitettävä esimerkiksi class-tunnisteen avulla.
Koska JS-koodaus liitetetään p-tekstielementtiin id-tunnisteella on CSS-muotoilu liitettävä class-tunnisteen avulla:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.vari1{
color: RED;
}
</style>
</head>
<body>
<p class="vari1" id="teksti1"></p>
<script>
document.getElementById("teksti1").innerHTML =
"Punainen teksti JavaScriptillä.";
</script>
</body>
</html>
Tulos www-sivulla:
JavaSript-koodi vaihtaa tekstin ja tekstinvärin painikkeella.
Huomaa !
JS-koodauksessa näytettävä teksti on " -merkkien välissä jolloin muotoiluohjeen liittämisessä on käytettävä ' -merkkejä !
CSS-ohjeet:
.vari1{
color: RED;
}
.vari2{
color: BLUE;
}
HTML- ja JS-koodaus:
<p class="vari1" id="teksti2"> Näytetään punainen teksti aluksi </p>
<button type="button" onclick="omaOhjelma2()">Vaihda teksti</button>
<script>
function omaOhjelma2() {
document.getElementById("teksti2").innerHTML = "<p class='vari2'>Ja teksti on vaihdettu.</p>";
}
</script>
Tulos www-sivulla:
Näytetään punainen teksti aluksi
Seuraavan esimerkin onclik()-funktion toteutusta voi soveltaa useissa HTML-elementeissä esimerkiksi teksti-elementeissä, kuvissa ja
painikkeessa. JS-scriptin käynnistävä teksti voi sijaita taulukossa tai listassa.
Esimerkissä info aukeaa h4-otsikkotekstistä (sininen) ja sulkeutuu painikkeella.
<h4 class="vari2" onclick="avaaInfopox()"> Avaa info-ruutu klikkaamalla </h4>
<div id="infoP"> </div>
<script>
function avaaInfopox() {
document.getElementById("infoP").innerHTML =
"<div class='poksi1'>" +
"<p class='keskitys'> Tässä esimerkkinä sisältönä tekstiä.</p>" +
"<button class='painike' onclick='omaOhjelma4()'> Sulje info </button>" +
"</div>" ;
}
function omaOhjelma4() {
document.getElementById("infoP").innerHTML = "" ;
}
</script>
Tulos www-sivulla:
Esimerkin CSS-ohjeet löytyy täältä.
Esimerkissä käytetään CSS-ohjeita taulukon muotoiluun ja näytetään JavaScript:n keinoin taulukko www-sivulle.
Esimerkkitaulukon otsikkorivin tekstit tuotetaan 1. riville normaalisti taulukkoon kirjoittamalla,
2. rivin tekstit muuttujien avulla ja 3. rivin yksiuloitteisen taulukon avulla.
<div id="taulu1"> </div>
<script
var Arvo1 = "Afrikka";
var Arvo2 = "Egypti";
var Arvo3 = "Kairo";
var Arvo4 = ["Aasia","Kiina","Peking"];
document.getElementById("taulu1").innerHTML =
"<table class='maanosat'>" +
"<tr><th> Maanosa </th> <th> Valtio </th> <th> Pääkaupunki </th></tr>" +
"<tr><td>" + Arvo1 + "</td> <td>" + Arvo2 + "</td> <td>" + Arvo3 + "</td></tr>" +
"<tr><td>" + Arvo4[0] + "</td> <td>" + Arvo4[1] + "</td> <td>" + Arvo4[2] + "</td></tr>" +
"</table>";
</script>
Tulos www-sivulla:
Esimerkin CSS-ohjeet löytyy täältä.
JavaScript:llä voidaan jonkin tapahtuman (event) seurauksena vaihtaa jonkin HTML-elementin CSS-ohjeella asetettua asetusta.
JavaSript:llä voidaan esimerkiksi vaihtaa taustaväriä, tekstin väriä, lisätä div-elementille varjo sekä toteuttaa
useita muitakin "temppuja".
Alla muutama helppo kikka
HTML-koodaus (CSS-ohjeet muualla selitetty):
<div id="boksi">
<h3 id="info1" onclick="taustaVaihto()"> Vaihda väri </3>
</div>
JavaScript:
<script>
function taustaVaihto() {
document.getElementById("boksi").style.backgroundColor = "lightblue";
document.getElementById("info1").innerHTML = "Taustaväri vaihdettu" ;
}
</script>
Taulukkoon soluihin voidaan lisätä JavaScriptit joiden avulla aukeaa lisätietoa sisältäviä ruutuja.
Huomaa, script-funktiot on nimettävä eri nimisiksi. Avautuvan info-laatikon toteutuksia on erilaisia ja on huolehdittava että ruudut on joko suljettavissa tai ne sulkeutuu aikaviiveellä itsestään.
HTML-koodaukset sekä JavaScript:
<table class="maanosat">
<tr><th>Maanosa</th> <th>Valtio</th> <th>Pääkaupunki</th></tr>
<tr><td>Afrikka</td> <td onclick="avaaEgypti()">Egypti</td> <td>Kairo</td></tr>
<tr><td>Etelä-Amerikka</td> <td>Brasilia</td> <td>Brasilia</td></tr>
<tr><td>Pohjois-Amerikka</td> <td>Kanada</td> <td>Ottawa</td></tr>
</table>
<div id="egypti"> </div>
<script>
function avaaEgypti() {
document.getElementById("egypti").innerHTML =
"<div class='poksi1'>" +
"<p class='keskitys'> Egyptin valtion pinta-ala on 1 001 450 km<sup>2</sup> " +
"ja asukasluku noin 97,04 miljoonaa.</p>" +
"<button class='painike' onclick='omaEgypti()'> Sulje info </button>" +
"</div>" ;
}
function omaEgypti() {
document.getElementById("egypti").innerHTML = "" ;
}
</script>
Tulos www-sivulla, klikkaa taulukossa Egypti-sanaa:
| Maanosa | Valtio | Pääkaupunki |
|---|---|---|
| Afrikka | Egypti | Kairo |
| Etelä-Amerikka | Brasilia | Brasilia |
| Pohjois-Amerikka | Kanada | Ottawa |
Esimerkissä painikkeen painamisesta 2 sekunnin kuluttua näytetään teksti ja teksti katoaa automaattisesti.
HTML- ja JavaScript-koodaukset:
<button class="painike" onclick="setTimeout(omaHetki, 2000);"> Avaa teksti </button>
<div class="vari1" id="hetkinen"> </div>
<script>
function omaHetki() {
document.getElementById("hetkinen").innerHTML =
"<h3>Moi, odota hetkinen.</h3>";
setTimeout(suljeHetki, 3000);
}
function suljeHetki() {
document.getElementById("hetkinen").innerHTML = "";
}
</script>
Tulos www-sivulla:
Esimerkkiin liittyvä teksti.
<LISÄÄ KOODAUS TÄNNE
Tulos www-sivulla:
Vaihdetaan tästä kohtaa teksti !
Esimerkkiin liittyvä teksti.
<LISÄÄ KOODAUS TÄNNE
Tulos www-sivulla:
Vaihdetaan tästä kohtaa teksti !