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:
- Get the value of an input element using TypeScript
- Object is possibly null (document.getElementById) in TypeScript
- Property ‘click’ does not exist on type ‘Element’ in TypeScript
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm