CSS-muotoilu ja JavaScript (tälle sivulle tulee esimerkkejä myöhemmin)

CSS-muotoilujen liittäminen JavaScript-koodauksiin

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.

Tekstin väri

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:



Tekstiin liitetään kaksi CSS-ohjetta

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



Tekstin klikkaus avaa info-laatikon

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:

Avaa info-ruutu klikkaamalla

Esimerkin CSS-ohjeet löytyy täältä.


JavaScript & CSS & Taulukko

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 vaihtaa HMTL-elementin ulkoasua

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

Div-elementin taustävärin sekä tekstin vaihto elementissä olevalla tekstillä

Vaihda väri

 
  <LISÄÄ KOODAUS TÄNNE
  
  

Tulos www-sivulla:

Vaihdetaan tästä kohtaa teksti !



6 OTSIKKO TEKSTI

Esimerkkiin liittyvä teksti.

 
  <LISÄÄ KOODAUS TÄNNE
  
  

Tulos www-sivulla:

Vaihdetaan tästä kohtaa teksti !



7 OTSIKKO TEKSTI

Esimerkkiin liittyvä teksti.

 
  <LISÄÄ KOODAUS TÄNNE
  
  

Tulos www-sivulla:

Vaihdetaan tästä kohtaa teksti !



8 OTSIKKO TEKSTI

Esimerkkiin liittyvä teksti.

 
  <LISÄÄ KOODAUS TÄNNE
  
  

Tulos www-sivulla:

Vaihdetaan tästä kohtaa teksti !



9 OTSIKKO TEKSTI

Esimerkkiin liittyvä teksti.

 
  <LISÄÄ KOODAUS TÄNNE
  
  

Tulos www-sivulla:

Vaihdetaan tästä kohtaa teksti !