How To Set CSS Styles On An Element Using Typescript

Set CSS styles on an Element using TypeScript

Knowing how to set CSS styles on an Element using Typescript will be very handled when you are working with the browser. So how to do it? Let’s go into detail now.

Set CSS styles on an Element using TypeScript

Using style property

You can set CSS styles for elements through the style object by calling it and then assign the value you want to set.

Example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Typescript</title>
    </head>
    <body>
        <h1>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam assumenda
            eos doloribus magnam, alias temporibus quia nesciunt, ipsum, pariatur
            laudantium animi sapiente ratione dolores fugiat ipsam. Sint, voluptate.
            Amet, aliquam.
        </h1>
        <script src="./index.js"></script>
    </body>
</html>
const h1Ele = document.querySelector("h1");
console.log(h1Ele);

h1Ele.style.color = "green";
h1Ele.style.backgroundColor = "black";
h1Ele.style.fontSize = "3rem";

Output:

As you see, I can access the HTML element attribute through the style object, and I assign value for the attribute by the equal symbol. You should remember by using style object, the attribute name you have to use in camelCase as I use with background color property which in the CSS file will be ‘background-color’.

Using setProperty method

The setProperty method will also help you to style your HTML element with a name like the name you use in the CSS file.

Syntax:

element.style.setProperty(propertyName, value)

Parameters:

  • propertyName: The name of the property you want to style to your element.
  • value: The value that you want to set for your property.

Example:

const h1Ele = document.querySelector("h1");

h1Ele.style.setProperty("color", "green");
h1Ele.style.setProperty("background-color", "black");
h1Ele.style.setProperty("font-size", "2rem");

Output:

As you see here, with the setProperty method, you can use a name like using in the CSS file.

Set through class

You might know that you can set your HTML element by attaching the class name to your element. So with Typescript, we can make some code to create a class name for your element that is already styled by using setAttribute.

Example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Typescript</title>
        <link rel="stylesheet" href="./index.CSS" />
    </head>
    <body>
        <h1 class="">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam assumenda
            eos doloribus magnam, alias temporibus quia nesciunt, ipsum, pariatur
            laudantium animi sapiente ratione dolores fugiat ipsam. Sint, voluptate.
            Amet, aliquam.
        </h1>
        <script src="./index.js"></script>
    </body>
</html>
.text {
    color: greenyellow;
    background-color: black;
    font-weight: bold;
}
const h1Ele = document.querySelector("h1");
h1Ele.setAttribute("class", "text");

Output:

As you see here, I use the setAttribute method and then set class for h1 element with value is a text which has already styled.

Summary

In this article, I showed you how to set CSS styles on an element using TypeScript. You can set it directly through the style object, which contains all style properties, or you can set it indirectly by creating a CSS name already styled and then using the setAttribute method to attach that name to your element.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *