DELiTH

Programutveckling och annat utvecklande

Definiera namn i CSS som sedan används i javascript

Ett inte helt ovanligt scenario är att man skapar ett antal CSS och väljer att aktivera dessa via mediaqueries. Då kan det vara knepigt att veta vilket CSS som är aktivt för tillfället. Men som tur är så finns det en väg runt detta även om den inte är helt uppenbar.

I nedanstående exemplet så laddas två olika bilder beroende på upplösning. Visst finns det andra sätt att lösa detta på men här definieras namnet som ligger till grund för bildvalet i CSS-filen.

HTML

<!DOCTYPE html>
<html lang="sv">
 <head>
  <title>Ett exempel på att byta bild beroende på upplösning</title>
  <link media="screen AND (max-width: 480px)" rel="stylesheet" type="text/css" href="mobile.css" />
  <link media="screen AND (min-width: 481px)" rel="stylesheet" type="text/css" href="normal.css" /> 
  <script src="jquery.js"></script>
 </head>
 <body>
  <img src="normal.png" id="exampleImage" />
  ...sidans innehåll...
  <span id="sizeName"></span>
 </body>
</html>

mobile.css

#sizeName {
  display: none;
}

#sizeName:after {
  content: "mobile";
}

normal.css

#sizeName {
  display: none;
}

#sizeName:after {
  content: "normal";
}

javascript

function getSizeName() {
  var content = getComputedStyle(document.getElementById('sizeName'),':after').content;
  return content.replace(/[^a-zA-Z0-9]/g, '');
}
jQuery(window).on("resize", function() {
  jQuery("#exampleImage").attr("src", getSizeName()+".png");
});
jQuery(document).ready(function() {
  jQuery("#exampleImage").attr("src", getSizeName()+".png");
});

Hur går det till?

Eftersom pseudoklassen :after inte tillhör DOM så går det inte att använda jQuery eller liknande för att hämta ett värde som satts här. Lösningen heter getComputedStyle som finns i nästintill samtliga webbläsare som används på marknaden idag. Med hjälp av getComputedStyle så kan man gå in och hämta ett värde på ett DOMelement som satts från en stilmall. Eftersom vi använder mediaqueries som är beroende av storleken på den aktuella viewporten så kan man dynamiskt uppdatera variabeln och sedan fånga upp detta värdet som sedan kan användas för att exempelvis ladda bilder som är beroende på upplösning. (Exempelvis skulle man kunna ha en toppbild som heter topp_mobil.png för mobilen och topp_normal.png för övriga upplösningar.)

Kommentera

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