Endre stil fra Javascript

Vi kan ommøblere en HTML-side stort sett slik vi ønsker ved hjelp av DOM-programmering i Javascript. Vi kan flytte elementer, endre innholdet osv. Blandt de ting vi kan gjøre er å endre utseendet på elementer ved å endre style-egenskaper. dett kan vi gjøre på flere måter. Vi kan:

• endre style-egenskaper direkte
• endre tilordning av stilklasser (class)
• lage en dynamisk tilordning av javascriptbegivenheter som gjør de siste
• endre vilket stilsett vi ønsker å bruke

Vi skal se nærmere på disse mulighetene i denne modulen

Endre style direkte

Dersom elementer har attributten style, kan vi skrive Javascriptkode som endrer denne.

HTML-koden er slik:

<div id="target3" style="color:blue; font-size:30px"
     class="a" onmouseover="changeStyle(event,'red','40px')" 
               onmouseout="changeStyle(event,'blue','30px')">
    Dra musa over her så blir det rødt
</div>

Javascriptfunksjonen er slik:

    function changeStyle(event,clr,sze)
    {
        var evt=event || window.event;
        var elt= evt.target || evt.srcElement;
        
        elt.style.color=clr;
        elt.style.fontSize=sze;
    }
    

Endre css class

I stedet for å arbeid direkte på stilegenskaper kan vi sette stilklasse.

HTML-koden er slik:

<div id="target2" 
     class="a" onmouseover="setClass(event,'b')" 
               onmouseout="setClass(event,'a')">
    Dra musa over så blir det rødt
</div>

Javascriptfunksjonen er slik:

    function setClass(event,cls)
    {
        var evt=event || window.event;
        var elt= evt.target || evt.srcElement;
        
        elt.className=cls;
    }
    

De aktuelle stilklasssene er slik:

    .a{color:blue; font-size:30px}
    .b{color:red; font-size:40px}
    

Tilordning av dynamikk

I litt mer kompliserte konstruksjoner kan det være en god ide å tilordne Javascriptfunksjonalitet dynamisk. På samme måte som vi kan og bør skille struktur fra utseende, kan og bør vi skille ut de dynamiske egenskapene. Det betyr at vi lar siden selv tilordne Javascriptfunksjonalitet når den lastes.

Vi merker de aktuelle elementene på en eller annen måte, f.eks. med class-attributt. Når siden lastes finner vi de merkede elementene og tilordner dynamikk.

HTML-siden er slik

<html>
<head>
    <title>dynademo</title>
    
    <script type="text/javascript" src="dynajava.js">     
    </script> 
    
    <style>
    .a{color:blue; font-size:40px}
    .b{color:red; font-size:40px}
    .x{color:blue; font-size:40px}
    </style>

</head>

<body onload="setHandlers()">
<h1>Stilforandring</h1>
<div class="x">marit</div>
<div class="a">per</div>
<div class="x">kari</div>
<div class="a">jens</div>
</body>

<div<a href="javascript:history.back()">Tilbake</a></div>
</html>

De aktuelle scriptfunksjonenen er slik

    function hilite(e)
    {
        var evt=e || window.event;
        var elt= evt.target || evt.srcElement;
        
        elt.className='b';
    }

    function unhilite(e)
    {
        var evt=e || window.event;
        var elt= evt.target || evt.srcElement;
        
        elt.className='a';
    }
    
    function setHandlers()
    {
        var lst=document.getElementsByTagName('div');
        for(ix=0; ix < lst.length;ix++)
        {
            if (lst[ix].className)
            {
                if (lst[ix].className == 'x')
                {
                    lst[ix].onmousemove=hilite;
                    lst[ix].onmouseout=unhilite;
                }
            }
        }
    }

Endre stilsett

Det er mulig å endre hvilket stilsett en HTML-side benytter fra Javascript. Nedenfor er et eksempel der en fransk artikkel om Picassos surrealistiske periode kan vises med engelsk eller tysk oversettelse. Oversettelsen er gjort med Babel Fish og er vel heller tvilsom, men det er ikke det som er hovedpoenget her.

Inspiser kildekoden for å se hvordan siden er bygd opp.

Stilsettene er referert i HTML-fila slik:

  <link rel="stylesheet" href="picstilFrench.css">
  <link rel="stylesheet" href="picstilEnglish.css">
  <link rel="stylesheet" href="picstilGerman.css">
 

De tre stilsettene er slik:

• picstilFrench.css

  .rightimage{float:right; margin: 0 0 10px 10px;padding:2px;}
  .german{display:none}
  .english{display:none}
  .french{display:visible;}
     

• picstilEnglish.css

  .rightimage{float:right; margin: 0 0 10px 10px;padding:2px;}
  .german{display:none}
  .english{display:visible;}
  .french{display:none;}
      

• picstilGerman.css

  .rightimage{float:right; margin: 0 0 10px 10px; padding:2px;}
  .german{display:visible;}
  .english{display:none}
  .french{display:none;}
      

Vi ser at det eneste som er forskjellig er hvorvidt det er engelsk, tysk eller fransk versjonen skal vises.

Javascriptet som bytter stilsett er slik:

   function chooseStyle(theChoice){
    if(document.styleSheets)
      for(i=0;i<document.styleSheets.length;i++)
        if(i==theChoice)
          document.styleSheets[i].disabled=false;
        else
          document.styleSheets[i].disabled=true;
  }

Javascriptet kalles slik:

  <a href="Javascript:chooseStyle(1)">English</a> |
  <a href="Javascript:chooseStyle(2)">German</a> |
  <a href="Javascript:chooseStyle(0)">Francais</a>

Vi kan selvsagt kalle funksjonen på andre måter, f.eks. som respons på et museklikk:

  <div onClick="chooseStyle(2)">
    klikk her for å bytte stilsett til tysk
  </div>