Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

An important part of turning static web pages into dynamic web apps is to dynamically change the styling of elements on the page. JavaScript lets us do this by exposing CSS properties that are part of the element as JavaScript properties that we can get or set.

DOM elements have the style object we can use to make changes to the style of DOM objects. Some things we can change with the style object includes changing text colors, changing the background color, animating objects, changing sizes, showing/hiding parts of a page, creating pop-up boxes to display things, etc.

The style is like any other DOM object in that it has many properties and methods we can use to style things. The properties are CSS properties except that all the CSS properties are converted to camel case instead of the kebab case used in CSS.

The style object returns the in-line style of an element. If you want your element to look the way you want, you have to also take into account CSS that’s external to the in-line styles of the selected element, like external CSS files and styles in style elements.

Below are some common style object properties and their CSS equivalents:

backgroundColor: same as the background‐color property in CSS, which gets or sets the background color of an element
borderWidth: same as the border-width property in CSS, which gets or sets the borders of an element
fontFamily: same as the font-family property in CSS, which gets or sets the font of an element
lineHeight: same as the line-height property in CSS, which gets or sets the height between lines of an element
textAlign: same as the text-align property in CSS, which gets or sets the horizontal alignment of an element

To get all the CSS properties of an element, we should use the window. getComputedStyle method to get all the CSS properties of an element. It includes all in-line CSS, external CSS, and CSS in style tags. This gets all the CSS and combines them into one object that actually contains the correct CSS styles of the element. We can use it as follows …

In index.html, we add:

<html>  
  <head>  
    <title>Get Styles</title>  
    <link href="styles.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
    <h1 id="title">Title</h1>  
    <h1>Styles</h1>  
    <ul id="styles-list"></ul>  
    <script src="script.js"></script>  
  </body>  
</html>

Then in script.js, we have:

window.onload = () => {  
  const title = document.getElementById("title");  
  const stylesList = document.getElementById("styles-list");  
  const titleStyles = window.getComputedStyle(title);  
  Object.keys(titleStyles).forEach(key => {  
    const li = document.createElement("li");  
    if (isNaN(+key)) {  
      li.innerHTML = `${key}: ${titleStyles[key]}`;  
      stylesList.appendChild(li);  
    }  
  });  
};

In styles.css, we add:

#title {  
  color: white;  
  background-color: lightblue;  
  font-family: Arial;  
  margin-bottom: 20px;  
  font-size: 18px;  
  font-family: monospace;  
}

As you can see, we have the full list of styles of the element with the ID title. As you scroll down, you will see that the fontFamily, fontSize, etc. are consistent with what we set in styles.css.

Changing Styles

Name: Add Dynamic Styling to HTML Elements With JavaScript
Rating: 2.2 (7303 reviews)
Author: aumayeung

To change the styles of an element, we just get the element with the usual functions, like getElementById, and then set the properties of the style object, like so:

document.getElementById('square').style.padding = '10px';

In the example above, we get the square element and then set the padding of the element with ID square to 10px. Note that we have to have px at the end for the style to be applied.

Animating Styles With JavaScript

If we want to animate an element in JavaScript, we can apply the same CSS style changes as we did before.

All we have to add is a timer delay to the execution of the style changes so it’s slow enough that we see the element’s style is being applied. To delay the execution of a piece of code in JavaScript, we can use the setTimeout function.

For example, if we want to make a box move, then we can write the following code. In index.html, we add:

<html>  
  <head>  
    <title>Animation</title>  
    <link href="styles.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
    <div id="box"></div>  
    <script src="script.js"></script>  
  </body>  
</html>

Then in script.js, we add:

const animate = () => {  
  const box = document.getElementById("box");  
  for (let i = 0; i < 10000; i++) {  
    (i => {  
      setTimeout(() => {  
        const left = window.getComputedStyle(box).left;  
        box.style.left = `${(+left.replace("px", "") + i * 2) %  
          window.innerWidth}px`;  
      }, 1000);  
    })(i);  
  }  
};

window.onload = () => {  
  animate();  
};

And in styles.css, we add:

#box {  
  background-color: lightcoral;  
  width: 50px;  
  height: 50px;  
  position: absolute;  
  top: 50px;  
  left: 10px;  
}

We used the setTimeout function to delay the execution of the style change to the element with the ID box by 1000 milliseconds, which is one second.

Inside the function we passed into the setTimeout function, we set the left property by getting the existing left CSS property then adding i*2 to it. Then we took the remainder divided by window.innerWidth. This lets us slide the box left and right inside the browser window.

Rollover Effect

The rollover effect is the dynamic effect where the image changes when you hover over an element, and a different image is displayed when you move your mouse off them the same element.

This is a common effect for showing different information when users hover their mouse over the element and then move their mouse off of it. It’s also used for other kinds of toggles. To create the effect, we have to modify an image element to show different things when the mouse has hovered over it and when the mouse is off.

The image object has the following properties:

alt — alt attribute of an image
complete — true when an image finishes loading
height — height of the image
isMap — indicates whether the image is part of an image map
naturalHeight — image’s original height
naturalWidth — image’s original width
src — the src attribute of the image
width — the width of the image element

To create the rollover effect, we can do the following. In index.html, we add:

<html>  
  <head>  
    <title>Get Styles</title>  
    <link href="styles.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
    <img src="images/dog1.jpg" id='dog' />  
    <script src="script.js"></script>  
  </body>  
</html>

Then in script.js, we put:

window.onload = () => {  
  const dog = document.getElementById("dog");  
  dog.addEventListener("mouseover", () => {  
    if (dog.src.includes("images/dog1.jpg")) {  
      dog.src = "images/dog2.jpg";  
    } else {  
      dog.src = "images/dog1.jpg";  
    }  
  }); 

  dog.addEventListener("mouseout", () => {  
    if (dog.src.includes("images/dog1.jpg")) {  
      dog.src = "images/dog2.jpg";  
    } else {  
      dog.src = "images/dog1.jpg";  
    }  
  });  
};

Finally in styles.css, we have:

#dog {  
  width: 300px;  
}

We shrank the image to 300px wide. Then in script.js, when we put our mouse over the image, we switch it to a different image.

Then when the user moves their mouse outside of the element, we toggle to another image. The two event handlers together will create the toggle rollover effect when we move our mouse back and forth inside and outside of the image.

Grow Image

To make an image grow when we hover over the mouse and then shrink back to the original size when we move the mouse outside the image, we can just handle the mouseover and mouseout events of the image.

When we hover our mouse over it, then we grow the image size; when the mouse moves out, then we shrink it back to the original size.

To do this, we put the following in index.html:

<html>  
  <head>  
    <title>Get Styles</title>  
    <link href="styles.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
    <img src="images/dog.jpg" id='dog' />  
    <script src="script.js"></script>  
  </body>  
</html>

Then in script.js, we put:

window.onload = () => {  
  const dog = document.getElementById("dog");  
  dog.addEventListener("mouseover", () => {  
    dog.style.width = "500px";  
  }); 

  dog.addEventListener("mouseout", () => {  
    dog.style.width = "300px";  
  });  
};

In styles.css, we add:

#dog {  
  width: 300px;  
}

The code in script.js does exactly what we just described. It changes the image size to 500px when users hover their mouse over it, then shrinks back to 300px when we move our mouse out.

Slideshow

We can manipulate our images to create a simple slideshow. All we have to do is rotate through the images we have in a set time interval with the setInterval function built into JavaScript.

In index.html, we have:

<html>  
  <head>  
    <title>Get Styles</title>  
    <link href="styles.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
    <img src="images/dog1.jpg" id='dog' />  
    <script src="script.js"></script>  
  </body>  
</html>

Then in script.js, we put:

window.onload = () => {  
  const dog = document.getElementById("dog");  
  const dogImgPaths = ["images/dog1.jpg", "images/dog2.jpg", "images/dog3.jpg"];  
  let index = 0;  
  setInterval(() => {  
    index = (index + 1) % dogImgPaths.length;  
    dog.src = dogImgPaths[index];  
  }, 3000);  
};

And in styles.css, we put:

#dog {  
  width: 300px;  
}

All we’re doing is rotating to a different image in our collection every three seconds by setting the path of the image in the dogImgPaths . To rotate the images we just set the index by increasing it by one and then taking the modulus with dogImgPaths.length. This way, index is always between 0 and 2 so we don’t try to get an image that doesn’t exist.

Handy Animation Properties

JavaScript has some animation properties that let us create animations by defining the key frames in CSS and then using JavaScript to control the change of the key frames to create our animation.

The following properties are provided by JavaScript to control animation:

animation — gets or sets all animation properties except animationPlayState
animationDelay — gets or sets delay before animation starts
animationDirection — gets or sets the direction which the animation is running
animationDuration — gets or sets the length of the animation
animationFillMode — gets or sets what happens when the animation isn’t running
animationIterationCount — gets or sets how many times an animation is played
animationName — gets or sets the list of an animation list, using CSS key-frame at rules
animationTimingFunction — gets or sets the speed of how an animation should run over time
animationPlayState — gets or sets whether the animation is running

To set the key frames of an animation in CSS, we use the keyframes property.

Making simple animations and getting and changing styles of an element isn’t too difficult with JavaScript. We can do a lot without writing too much code.

Animation is easy if we use the setTimeout and setInterval timer functions in order to delay the execution of or repeat the execution of styles when changing code.