DELiTH

Programutveckling och annat utvecklande

Att använda mediaqueries för att styra javaskript

Satt och blev lite frustrerad idag när jag skulle skriva en mall som skulle ladda olika stilmallar beroende på upplösning och samtidigt skulle det visas olika toppbilder på sidan beroende på vilken upplösning man använde. Efter en hel del grävande så kom jag på en lösning där man kan styra ett javaskript.

Genom att definiera ett nytt element på sidan som man döljer

<span id="sizeName"></span>

så kan man låta stilmallen populera detta med ett namn som beskriver den aktuella stilmallen.

#sizeName:after {
  content: "namn på stilmallen";
}

Problemet är nu att jQuery med flera inte kan komma åt selektorn :after eftersom denna pseudoklass inte är en del av DOM. Men lösningen heter istället window.getComputedStyle som gör att man kan hämta värdet som man definierat i stilmallen.

function getSizeName() {
  var name = window.getComputedStyle(document.getElementById("sizeName")).content;
  return name.replace(/[^a-zA-Z0-9]/g, '');
}

Namnet som man får ut från funktionen getSizeName kan man ju sedan använda för att bygga ihop namn på bilder mm. Exempelvis skulle man kunna ha olika toppbilder beroende på upplösning, topp_mobil.png, topp_normal.png och topp_bred.png. Definierar man sedan mobil, normal och bred i olika stilmallar som laddas via mediaqueries så kan man ju med ett enkelt skript ladda olika bilder beroende på upplösning.

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *