JS - computed styles

Kolejna rzecz, której nie wypada znać, czyli pobieranie stylów CSS za pomocą JavaScript. Do dzieła.

Rzućmy okiem na to:

window.addEventListener("DOMContentLoaded", function(){

    let para = document.getElementById('para');
    para.style.fontSize = "18px";
    console.log(para.style.fontSize);
    //18px

});

Niby fajnie, ustawiliśmy, odczytaliśmy. Nie ustawiajmy zatem:

window.addEventListener("DOMContentLoaded", function(){
  
    let para = document.getElementById('para');
    console.log(para.style.fontSize);
    //<empty string>

});

Style property okazuje się zawodne – choć paragraf ma jakiś font-size, ten nie jest w stanie go odczytać, bo nigdy go nie ustawiał.

Ok, zróbmy to:

window.addEventListener("DOMContentLoaded", function(){
   
    let para = document.getElementById('para');
    let computed = getComputedStyle(para);
    let fs = computed.getPropertyValue('font-size');
    console.log(fs);
    //16px

});

Już lepiej. Postarajmy się to zmienić na typ liczbowy:

window.addEventListener("DOMContentLoaded", function(){
 
    let para = document.getElementById('para');
    let computed = getComputedStyle(para);
    let fs = computed.getPropertyValue('font-size');
    console.log(fs);
    //16px
    console.log(+fs);
    //NaN
    console.log(parseInt(fs));
    //16
    console.log(Number(fs));
    //NaN

});

Jak widać mamy już sposób na zamianę tego na liczbę. Teraz funkcję napiszmy:

function incrementFontsize(el, unit="px", by=1){

    let computed = getComputedStyle(para);
    let fs = computed.getPropertyValue('font-size');

    let fsNumber = parseInt(fs);
    let newSize = `${fsNumber+by}${unit}`;

    el.style.fontSize = newSize;
}

Teraz możemy użyć tej funkcji:

window.addEventListener("DOMContentLoaded", function(){
     let para = document.getElementById('para');

     incrementFontsize(para);
     incrementFontsize(para);
     incrementFontsize(para);

     console.log(para.style.fontSize);
     //19px
   
});

Działa.

JS – computed styles