Set CSS styles on an Element using TypeScript

# Set CSS styles on an Element using TypeScript

To set CSS styles on an element in TypeScript:

Select the specific element.
Set properties on the style object of the element to update its styles.
For example, el.style.backgroundColor = 'lime'.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="box">Hello world</div>

    <script src="./src/index.ts"></script>
  </body>
</html>

And here is the related TypeScript code.

src/index.ts

Copied!
// 👇️ const box: HTMLElement | null
const box = document.getElementById('box');

if (box != null) {
  box.style.backgroundColor = 'lime';
  box.style.color = 'white';
  box.style.fontSize = '2em';
}

set css styles on element in typescript

The code for this article is available on GitHub

We used the document.getElementById method to select the element. The method returns null if no element with the provided id exists in the DOM, so we had to make sure the box variable doesn't store a null value before accessing any properties on it.

If you need to remove a specific CSS property from the element, set it to an empty string.

# Using document.getElementsByClassName()

If you use the document.getElementsByClassName method instead, type the elements as a collection of HTML elements.

src/index.ts

Copied!
const boxes = Array.from(
  document.getElementsByClassName('box') as HTMLCollectionOf<HTMLElement>,
);

boxes.forEach(box => {
  box.style.backgroundColor = 'lime';
  box.style.color = 'white';
  box.style.fontSize = '2em';
});

using documents get elements by class name

The code for this article is available on GitHub

The getElementsByClassName method returns a type of HTMLCollectionOf<Element> and the Element interface doesn't contain the style property.

This is why we used a type assertion to type the collection as HTMLCollectionOf<HTMLElement>.

We used the style object to set CSS properties on the element.

Note that multi-word property names are camel-cased when using the style object.

# Using the `setProperty()` method instead

If you don't like CSS property names being camel-cased, you can use the setProperty method instead.

src/index.ts

Copied!
// 👇️ const box: HTMLElement | null
const box = document.getElementById('box');

if (box != null) {
  box.style.setProperty('background-color', 'lime');
  box.style.setProperty('color', 'white');
}

using set property method instead

The code for this article is available on GitHub

The setProperty method takes the following 3 parameters:

propertyName - the name of the CSS property we want to modify. Note that property names of multiple words must be hyphenated.
value - the new value for the CSS property.
priority - can be set to important or an empty string.

I've also written an article on how to pass CSS styles as props in React TypeScript.

# Using the `style` property to read CSS property values

You can also use the style object to read CSS property values from the element.

src/index.ts

Copied!
// 👇️ const box: HTMLElement | null
const box = document.getElementById('box');

if (box != null) {
  box.style.setProperty('background-color', 'lime');

  // 👇️ "lime"
  console.log(box.style.backgroundColor);

  // 👇️ "16px"
  console.log(window.getComputedStyle(box).fontSize);
}

The code for this article is available on GitHub

The first example reads the value of the background color property on the element.

However, this wouldn't work if the property was not set as an inline style on the element.

If you need to consider styles set in external stylesheets, use thewindow.getComputedStyle method instead.

The getComputedStyle method returns an object that contains the values of all CSS properties of the passed-in element, after applying stylesheets.

I've also written an article on how to add a class to an element in React.

If you need to show/hide an element in TypeScript, check out the following article.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Set CSS styles on an Element using TypeScript