Webbteknik 2

Laboration 1D

Javascript och CSS

I den här labben skall vi prova på att påverka stilen på ett html-element på några olika sätt.

0 - Skapa en arbetsmapp

Förslagsvis med namnet lab-1d, där du sparar filerna för just den här laborationen.

1 - Förbered en html-, en css- och en javascript-fil

Skapa en fil index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript och CSS</title>
    <link rel="stylesheet" href="style.css" />
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <h1>Javascript och CSS</h1>
    <p>Detta är en text som vi kommer att ändra stilen på.</p>

    <button id="färgKnapp">Byt färg</button>
    <button id="klassKnapp">Växla stilklass</button>
  </body>
</html>

Skapa style.css:

.alt {
color: white;
background-color: darkblue;
padding: 0.5em;
border-radius: 0.5em;
}

Skapa till slut script.js med följande startkod:

const text = document.querySelector('p');
const colorButton = document.querySelector('#färgKnapp');
const classButton = document.querySelector('#klassKnapp');


// Ändra färg direkt med style
colorButton.addEventListener('click', function() {
  console.log('TODO: ändra textfärg');
});


// Växla CSS-klass med classList
classButton.addEventListener('click', function() {
  console.log('TODO: växla class')
});

Öppna index.html med LiveServer

Öppna konsolen och prova att trycka på knapparn. Platshållar-koden loggar ut vad vi skall skall göra

2 - använd style-egenskapen för att ändra färg

style-egenskapen, som alla html-element har, exponerar alla möjliga css-egenskapar som ett element kan ha. I det här exempelet skall vi testa att byta färg, men experimentera gärna med att ändra andra css-egenskaper.

I den första händelsehanteraren, den för colorButton, byter du ut console.log-raden med följande rad:

text.style.color = "red";

Spara och ladda om sidan. Klicka på knappen “Byt färg”. Om färgen på texten inte ändras så får du kontrollera konsolen för eventuella felmeddelanden.

3 - använd classList för att slå på och av en CSS-klass

classList-egenskapen är en annan väldigt användbar egenskap som alla html-element har. Den exponerar metoder för att lägga till, ta bort eller växla (dvs ta bort om den finns, eller lägga till om den inte finns) CSS-klasser på elementet.

I den andra händelsehanteraren, den för classButton, byter du ut console.log-raden med följande rad:

text.classList.toggle("alt");

Spara och testa i webbläsaren.

Bonusutmaningar

  1. Lägg till en knapp som gömmer/visar texten genom att ändra style.display.
  2. Skapa flera klasser i CSS (t.ex. .storText, .markerad) och uppdatera javacript koden för att växla mellan dem.