Beregnet stil

Hva

Ofte blir stildefinisjonene ganske uoversiktlige. Vi har flere filer og vi har alternative definisjoner for ulike dimesjoner og vi har en "kaskade" av detaljeringsgrad i definisjonene. I tillegg har vi kanskje brukt style-attributten i enkelte elementer. Summen av dette er at vi mister oversikten over hva som er effektiv stilangivelse i enkelte situasjoner. Hjelpen her, foruten å holde orden under arbeidet, er å se på utviklingsverktøyet i browseren og se på "Computed style" når vi inspiserer et element. Du kan jo høyreklikke på en av menylinjene på denne siden og inspisere elementet.

Vi kan også finne denne beregnede, aktive, stilangivelsen fra Javascript ved funksjonen getComputedStyle. Vi skal se på bruk nedenfor.

dump styles

Vi kan jo først lese og dumpe et beregnet stilsett for et a-element som vanligvis brukes til å vise demo-sider:

Klikk her

Koden er slik:

var dumpId;
function hideStyle(){
    document.getElementById(dumpId).innerHTML="";
}
function styleShow(elt,Id){
    dumpId=Id;
    var style=getComputedStyle(elt);
    var S='<button onclick="hideStyle()">'+
          'take it away</button>\n';
    for(var ix=0;ix<style.length;ix++){
        S+=style[ix]+" : "+
        style.getPropertyValue(style[ix])+
        "\n";
    }
    document.getElementById(dumpId).innerHTML=S;    
}

Hvis vi har tilgang til stilsettene og beregnet , eller aktiv, stil for et element har vi flere valgmuligeter for å foreta dynamiske justeringer:

Vi kan programmere om stildefinisjonen.
Vi kan bytte stilsett.
Vi kan endre klasselista for et element, classList
Vi kan endre style attributen for elementet

De tre første alternativene er beskrevt i materialet om, CSS. Her skal vi se litt på den siste varianten.

Justering

Her leser vi størrelsen på en container og justerer skriftstørrelsen i innholdet dynamisk, istedet for å spesifisere varianter i stilsettet.

Resize vinduet!

Hallo alle som ser dette

Dette kan gjøres på mange måter

Dette er bare ett eksempel på style manipulasjon

Containerdimensjon:

Stilsettet er veldig enkelt. Normalt ville dette ineholde en rekke spesifikasjoner for ulike dimensjoner av skjermen. I tillegg til det du ser her er det en definisjon for body-elementet som spesifiserer basis font med font-size:14px.

@media screen{
    .container{
        display:flex;
        display: -webkit-flex;
        flex-flow: row;
        -webkit-flex-flow: row;
        justify-content: center;
        -webkit-justify-content: center;
        padding:5px;
        border: solid thin black;
    }
    .box{
        border: solid thin red;
        width:30%;
        padding:5px;
        font-size:1em;        
    }
}

Programkoden

// report here
var dump;
// all the target boxes
var allBoxes;
// init
function setUpCalc(){
    window.addEventListener("resize",onResize,false);
    dump=document.getElementById("dump");
    dump.innerHTML="";
    allBoxes=document.querySelectorAll(".box");
    onResize();
}
// respond to resize-event
function onResize(){
    var B=getElementSize(".container");
    dump.innerHTML=""+B.w+","+B.h;
    var limit=Math.min(B.w,600);
    var fz=""+(limit*150)/600+"%";
    for(var ix=0;ix < allBoxes.length;ix++)
        allBoxes[ix].style.fontSize=fz;
    // note that we write fontSize i stead of
    // font-size, as we do in most(all?)
    // style attributes with a -
}
// get the size of an element
// (include padding, assumed symmetric)
function getElementSize(selector){
    var elt=document.querySelector(selector);    
    // get the currently active style
    var style=getComputedStyle(elt);
    // pick the values we want
    var w=parseInt(style.getPropertyValue("width"));
    var pw=parseInt(style.getPropertyValue("padding-left"));
    var h=parseInt(style.getPropertyValue("height"))
    var ph=parseInt(style.getPropertyValue("padding-top"));        
    return{"w":w+2*pw,"h":h+2*ph}
}

Det er en god del svakheter med denne løsningen. For det første "blafrer" det når vi resizer. Det er imidlertid ikke noe problem dersom vi er på brett eller telefon. Det som er verre er at vi raskt roter til ansvarsdelingen mellom CSS og Java og derved svekker oversiktligheten og vedlikeholdbarheten.

Fordelen er at vi kan ha noen nøkkelelementer som vi kan bruke som utgangspunkt for å tilpasse omgivelsene på en dynamisk måte uten å måtte detaljspesifisere og vedlikeholde mange detaljer i stilsettet.