Webbteknik 2

I denna laboration ska vi lära oss hur vi kan påverka elements utseende direkt från JavaScript genom att använda style-egenskapen. Detta är användbart när vi vill ändra specifika egenskaper baserat på användarens interaktion, eller när vi vill göra animationer.

0 - Förberedelser

Skapa en ny mapp lab-4c för denna laboration.

1. Skapa en fil index.html och lägg till grundläggande HTML-struktur (! i VSCode).
2. Länka in style.css som stylesheet och skapa den.
3. Länka in script.js som script och skapa den (glöm inte type="module").

I index.html, lägg till en enkel div med id box som vi kan experimentera med, samt en knapp med texten “Test”.

<div id="box">Jag är en låda</div>
<button id="test">Test</button>

I style.css, ge lådan lite grundläggande stil så den syns:

#box {
  width: 200px;
  height: 200px;
  margin: 10px 0;
  background-color: red;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

1 - Ändra färg och bakgrund

Alla DOM-element har en egenskap som heter style. Detta är ett objekt som innehåller alla CSS-egenskaper som går att sätta på elementet.

Viktigt om egenskapsnamn: I CSS heter egenskapen background-color. Men i JavaScript får variabelnamn inte innehålla bindestreck (eftersom det tolkas som minus). Därför skrivs CSS-egenskaper med bindestreck om till “camelCase” i JavaScript. Exempelvis:

• background-color blir backgroundColor
• font-size blir fontSize
• margin-top blir marginTop

I script.js:

1. Hämta elementet med id box och spara i en variabel box.
2. Skapa en klick-lyssnare på knappen.
3. I lyssnaren:
   • ändra bakgrundsfärgen till ljusblå genom att sätta style.backgroundColor = "lightblue" på box.
   • ändra textfärgen till svart genom att sätta style.color = "black" på box.

const box = document.getElementById("box");
const button = document.getElementById("test");

button.addEventListener("click", function () {
  box.style.backgroundColor = "lightblue";
  box.style.color = "black";
});

2 - Hantera enheter

Många CSS-egenskaper kräver en enhet, till exempel px, em, rem eller %. När vi sätter dessa från JavaScript måste vi komma ihåg att inkludera enheten i strängen.

I händelsehanteraren, testa att:

1. Ändra bredden på lådan till 300 pixlar.
2. Ändra teckenstorleken till 2rem.

box.style.width = "300px";
box.style.fontSize = "2rem";

Testa själv: Prova att sätt andra andra egenskaper genom att lägga till fler rader i klick-lyssnaren. När du skriver box.style. i din VSCode bör du se en lista med alla möjliga egenskaper du kan ändra.

3 - Växla synlighet

En vanlig sak man vill göra är att visa eller dölja element. Detta görs bäst med egenskapen visibility.

1. Skapa en ny knapp i HTML med texten “Göm/Visa”.
2. Lägg till en klick-lyssnare på knappen.
3. I lyssnaren, kolla om box.style.visibility inte är “hidden”.
4. Om inte är det, sätt den till “hidden”.
5. Annars, sätt den till “visible”.

<button id="toggle-btn">Göm/Visa</button>

const toggleBtn = document.querySelector("#toggle-btn");
toggleBtn.addEventListener("click", function() {
  if (box.style.visibility !== "hidden") {
    box.style.visibility = "hidden";
  } else {
    box.style.visibility = "visible";
  }
});

4 - Färgpaletten

Din uppgift är att skapa en “färgpalett” i form av en lista. När man för musen över en färg i listan ska lådan (#box) byta till den färgen.

1. Skapa en lista med minst 5 listelement i index.html.
2. Ge varje listelement ett data-color-attribut med en giltig css-färg.
3. Stilsätt listan som du vill i style.css.
4. I script.js:
   • Hämta dom-objektet för listan och spara i en variabel.
   • Lägg till en enda händelselyssnare på hela listan, för händelsen mouseover.
   • I lyssnaren, använd event.target för att kontrollera om musen är över ett element som har data-color. Dvs kolla om event.target.dataset.color har ett värde.
   • Om så är fallet, läs ut färgen och applicera den på lådan.

<ul id="palette">
    <li data-color="red">Röd</li>
    <li data-color="orange">Orange</li>
    <li data-color="yellow">Gul</li>
    <li data-color="green">Grön</li>
    <li data-color="purple">Lila</li>
</ul>

const palette = document.querySelector("#palette");

palette.addEventListener("mouseover", function(event) {
  const color = event.target.dataset.color;
  if (color) {
    box.style.backgroundColor = color;
  }
});

Utmaning:

• Lägg till kod (uanför någon lyssnare) som sätter färgen på list-elementen till deras respektive data-color-värde när sidan laddas, så att användaren ser vilken färg varje element representerar.
• Som du mäker så får vi mouseover event långt utanför texterna. Detta beror på att li-elementen sträcker ut sig som block-element. Fixa html-strukturen och / eller stilsättningen av li-elementen så att du bara får mouseover händelsern när musen faktiskt är över texten.

5 - Ändra storlek

Som en sista övning ska du få skapa funktionalitet för att ändra storleken på lådan.

1. Skapa två knappar i HTML: en med texten ”+” och en med texten ”-”.
2. I JavaScript, skapa en variabel size och sätt den till 100 (eller vad lådan har för startstorlek).
3. Koppla klick-lyssnare till knapparna.
4. När man klickar på ”+”, öka size med t.ex. 10.
5. När man klickar på ”-”, minska size med 10.
6. Efter att du ändrat variabeln, uppdatera box.style.width och box.style.height med det nya värdet. Glöm inte att lägga till “px” på slutet!

<button id="increase">+</button>
<button id="decrease">-</button>

let size = 200;
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#decrease");

btnIncrease.addEventListener("click", function() {
  size += 10;
  box.style.width = size + "px";
  box.style.height = size + "px";
});

btnDecrease.addEventListener("click", function () {
  size -= 10;
  box.style.width = size + "px";
  box.style.height = size + "px";
});

Sammanfattning

Nu har du lärt dig grunderna i att manipulera style-objektet. Kom ihåg att, om det går, så är det ofta bättre att använda CSS-klasser (och classList.toggle som vi gjorde i lab 4a) för större utseendeförändringar, eftersom det håller isär struktur och presentation bättre. Men för dynamiska värden det bara inte möjligt.