Add Dynamic Styling to HTML Elements With JavaScript
Tags: webdev, html, javascript, beginners
Published: 2020-01-16 02:43:34

**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
<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:

```javascript
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:

```css
#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
===============

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:

```javascript
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
<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:

```javascript
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:

```css
#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
<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:

```javascript
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:

```css
#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
<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:

```javascript
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:

```css
#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
<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:

```javascript
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:

```css
#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.