7.6 Styling Elements¶

In this lesson; we will be using the following HTML document:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The magical boxes</title>
    <style>
       #container{
         display: flex;
         justify-content: center;
       }
       .box{
         width: 10rem;
         height: 10rem;
         margin: 1rem;
       }
       #box-1{
         background: lightblue;
       }
       #box-2{
         background: Olive;
       }
       #box-3{
         background: tomato;
       }
       #box-4{
         background: DarkSlateGray;
       }
       #box-5{
         background: SaddleBrown;
       }
       #box-6{
         background: Yellow;
       }
       .border-bold{
         border: 0.8rem solid #000;
       }
       .border-light{
         border: 0.1rem solid #000;
       }
       .hide{
         display: none;
       }
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to our magical boxes website</h1>
    </header>
    <section id="container">
      <div class="box" id="box-1"></div>
      <div class="box" id="box-2"></div>
      <div class="box" id="box-3"></div>
      <div class="box" id="box-4"></div>
      <div class="box" id="box-5"></div>
      <div class="box" id="box-6"></div>
    </section>
    <script src="script.js"></script>
  </body>
</html>

DOM representation of a web page

Style Property¶

The Style Object

The style object represents an element style statement.

Task 1: Change the background color of the first box to green. Hint: use el.style.backgroundColor = "green".

let el = document.querySelector("#container > .box:first-child");

el.style.backgroundColor = "green";

Task 2: Change the background color of all the even boxes to red.

let els = document.querySelectorAll("#container > .box:nth-child(even)");

for(let el of els){
  el.style.backgroundColor = "red";
}

Task 3: Change the width of the third box to 30rem. Hint: use el.style.width = "30rem".

let el = document.querySelector("#container > .box:nth-child(3)");

el.style.width = "30rem";

Task 4: Change the height of the fourth box to 20rem. Hint: use el.style.height="20rem".

let el = document.querySelector("#container > .box:nth-child(4)");

el.style.height = "20rem";

Task 5: Change the border to all boxes to 0.2rem solid #000. Hint: use el.style.border = "0.2rem solid #000".

let els = document.querySelectorAll("#container > .box");

for(let el of els){
  el.style.border = "0.2rem solid #000";
}

Task 6: Add the text I am in box 5 to the fifth box, and change the font color to white. Hint: use el.style.color = "#fff".

let el = document.querySelector("#container > .box:nth-child(5)");
let text = document.createTextNode("I am in box 5");
el.appendChild(text);

el.style.color = "#fff";

Task 7: Refer to task 6; make the text font 2rem. Hint: use el.style.fontSize = "2rem".

let el = document.querySelector("#container > .box:nth-child(5)");
let text = document.createTextNode("I am in box 5");
el.appendChild(text);

el.style.color = "#fff";
el.style.fontSize = "2rem";

Task 8: Refer to task 7; add padding to the el. Hint: use el.style.padding = "4rem"

let el = document.querySelector("#container > .box:nth-child(5)");
let text = document.createTextNode("I am in box 5");
el.appendChild(text);

el.style.color = "#fff";
el.style.fontSize = "2rem";
el.style.padding = "4rem";

Task 9: Change the margin of all the boxes to 0.1rem 0.2rem.

let els = document.querySelectorAll("#container > .box");

for(let el of els){
  el.style.margin = "0.1rem 0.2rem";
}

Check the full list of the properties you can use with the style object on the W3schools.com website

Task 10: Apply some style to all the boxes using el.style.cssText = ""

let els = document.querySelectorAll("#container > .box");

for(let el of els){
  el.style.cssText = "border: 2rem dotted red; background-color: olive; margin-left: 0.1rem";
}

Using cssText to style an element leads to erasing all the inline CSS applied to the element

Task 11: Change background-color of the header to tomato, and the color to white. Use cssText.

let el = document.querySelector("header");

el.style.cssText = "background-color: tomato; color: white;";

Task 12: Refer to task 11; add padding: 2rem to header.

let el = document.querySelector("header");

el.style.cssText = "background-color: tomato; color: white; padding: 2rem";

Task 13: Refer to task 12; add margin: 2rem 0 to header.

let el = document.querySelector("header");

el.style.cssText = "background-color: tomato; color: white; padding: 2rem; margin: 2rem 0";

Task 14: Refer to task 13; center the text in the header element.

let el = document.querySelector("header");

el.style.cssText = "background-color: tomato; color: white; padding: 2rem; margin: 2rem 0; text-align: center";

className¶

Task 15: What are the classes applied to the first box? Hint: use el.className

let el = document.getElementsByClassName("box")[0];

console.log(el.className);

The result is: box

Task 16: Refer to task 15; add the border-bold class to el. Hint: use el.className="border-bold".

let el = document.getElementsByClassName("box")[0];

el.className = "border-bold";
console.log(el.className);

The result is: border-bold

Task 17: Refer to task 16; add the border-bold class to el. Hint: use el.className+="border-bold".

let el = document.getElementsByClassName("box")[0];

el.className += " border-bold";
console.log(el.className);

The result is: box border-bold

Task 18: Append the border-light class to the second box.

let el = document.getElementsByClassName("box")[1];

el.className += " border-light";
console.log(el.className);

The result is: box border-light

el.className

The el.className property returns and sets the given class value to the class attribute of the element.

classList¶

Task 19: Display the classes of the last box. Hint: use: el.classList.

let el = document.getElementsByClassName("box")[5];

console.log(el.classList);

The result is: DOMTokenList ["box", value: "box"]

Task 20: Refer to task 19; add the .hide class to el. Hint: use el.classList.add("hide").

let el = document.getElementsByClassName("box")[5];
el.classList.add("hide");
console.log(el.classList);

The result is: DOMTokenList(2) ["box", "hide", value: "box hide"]

Task 21: Refer to task 20; remove the hide class from el. Hint: use el.classList.remove("hide").

let el = document.getElementsByClassName("box")[5];
el.classList.add("hide");
el.classList.remove("hide");
console.log(el.classList);

The result is: DOMTokenList ["box", value: "box"]

Task 22: Add the border-bold class to the first box using classList.

let el = document.querySelector("#container > .box:first-child");

el.classList.add("border-bold");

Task 23: Add the border-light class to the third box using classList.

let el = document.querySelector("#container > .box:nth-child(3)");

el.classList.add("border-light");

Task 24: Remove the box class from the fourth box, and add the border-light class to it using classList.

let el = document.querySelector("#container > .box:nth-child(4)");

el.classList.remove("box");
el.classList.add("border-light");