CSS og JavaScript

Identifikasjon

Som kort vist i modulen Selectorer kan vi identifisere elementer på en vevside med følgende:

• getElementsByClassName(c)
• querySelectorAll(s)
• querySelector(s)

der altså parameteren c er et classname og s en CSS-selector.

Dette kommer altså i tillegg til de "gamle" getElementsByTagName() og getElementById(). Og vi kan også ta med de grunnleggende DOM-rutinene som lar oss navigere rundt med parent, sibling, children osv.

Merk også at siden elementnavnet er en lovlig selector kan vi skrive:
var alldivs=document.querySelectorAll('div') !
og oppnå det samme som
var alldivs=document.getElementsByTagName('div') !

Skru stilsett av og på

Det første vi må ha kontroll på er hvordan vi skal identifisere et stilsett. Her kan vi bruke flere strategier.

Vi kan få tak i en komplett liste av stilsett med å skrive:
var styleSheetList = document.styleSheets.
Deretter kan vi velge hvilke stilsett vi vil ha tak i ved hjelp av indeks. Et stilsett kan i denne sammenhengen være et <style>-element eller en link til et stilsett <link href="myStyle.css" rel="stylesheet" type="text/css" />.

Vi kan også identifisere det stilsettet vi vil ved å merke dem med id, og på vanlig måte identifisere stilsettet med document.getElementById(). Fordelen med dette er at vi ikke trenger passe på rekkefølgen dersom vi editerer vevsiden og endrer/reorganiserer stilbeskrivelser.

Når vi har identifisert et (eller flere) stilsett kan vi bruke egenskapen disabled til et stilsett. Denne er en boolean og vi kan skru den av og på.

Der vi har følgende stilsett og javaskript, og paragrafen ovenfor har class="may-be-red".

<style id="showred">
.may-be-red{color:red}
</style>
 

 function toggle(sheetId){
	var elt=document.getElementById(sheetId);
	elt.disabled=!elt.disabled;
 }
 

Endre class

Vi har mulighet for å angi flere stilklasser for et element, <p class="a b c"<, der a, b og c er uavhengige klassenavn med hver sin beskrivelse i et stilsett. Vi kan manipulere denn list av klassenavn på forskjellige måter. Vi kan bruke className-egenskapen til elementet og rett og sette denne til en ny verdi. Det btyr da at den nye verdien også kan ha en string med klassenavn skilt med blank. Alternativet er å bruke classList. Dette gjør det mulig for oss å manipulere lista med klassenavn på en mye mer fleksibel måte. classList har følgende metoder:

• add()
• remove()
• contains()
• toggle()

Vi kan f.eks. lage oss et veldig enkelt eksempel med følgende lille javaskript:

 function showMe(eltId){
	var elt=document.getElementById(eltId);
	elt.classList.remove("hide");
	elt.classList.add("show");
 }
 function hideMe(eltId){
	var elt=document.getElementById(eltId);
	elt.classList.add("hide");
	elt.classList.remove("show");
  }
  function toggleMe(eltId){
	var elt=document.getElementById(eltId);
	if(elt.classList.contains("hide"))
		showMe(eltId);
	else
		hideMe(eltId);
  }

Hvis vi kombinerer dette med følgende stilangivelser:

.hide{display:none}
.show{display:block}
 

har vi en enkel mekanisme for å skru av og på elementer på en vevside.

denne teksten er en paragraf med klasse "bluetext show" og id="test".

Endre stilbeskrivelsen

Vi kan også bruke JavaScript til å endre innholdet et stilsett. Vi trenger da å identifisere et stilsett, en selektor og den stilregelen vi vil endre. Det betyr at vi kan få et ganske omfattende søk (løkke) for å finne riktig stilregel i riktig selektor i riktig stilsett. Igjen er det litt å hente ved å identifisere stilsettet, slik som vi gjorde ovenfor. Hvis vi gjør dette kan vi ende opp med følgende funksjon, som et utgangspunkt som kan endres og tilpasses:

function setClassRule(sheetId,rule,name,val)
{
    // the stylesheet element
    var styleElt=document.getElementById(sheetId);
    // as a styleshhet
    var styleSheet=styleElt.sheet;
    // loop rules   
    var myrules=styleSheet.cssRules;
    for(i=0; i < myrules.length; i++){
        if(myrules[i].selectorText==rule){
            for(p in myrules[i].style){
                if(myrules[i].style.getPropertyValue(name))
                    myrules[i].style.setProperty(name,val,null);
            }
        }
    }
}

Vi bruker følgende stilsett på en paragraf:

<style id="showgreen">
#greentext{color:green}
</style> 

Denne paragrafen har id="greentext" og er derfor grønn, helt til vi endrer fargen til rød:

setClassRule('showgreen','#greentext','color','red')

Varianter av denne teknikken skal vi bruke i noen av de neste modulene for å manipulere stilregler som blandt gir oss muligheter til å animere rotasjoner og bevegelse.