How to make text fat in JavaScript

Learn how to make text bold in Javascript with this simple example.

Using JavaScript to Make Text Fat

In JavaScript, you can use the font-weight property to make text appear thicker and heavier. This property can be used to set the weight of text and ranges from 100 to 900. The higher the number, the thicker the text will be. For example, if you set the font-weight property to 900, the text will appear bolder than if you set it to 400.

To use the font-weight property, you will need to set the style of an element using the style object. For example, if you wanted to make a <h1> element appear fat, you could write the following:


let myH1 = document.querySelector('h1');
myH1.style.fontWeight = 900;

This will set the font weight of the <h1> element to 900, making it appear much thicker and bolder than before. You can also set the font weight of an element in CSS. For example, if you wanted to make the same <h1> appear fat in CSS, you could write the following:


h1 {
  font-weight: 900;
}

This will set the font weight of all <h1> elements on the page to 900, making them appear bolder than before. You can also set the font weight of an individual element in CSS by using the id or class selector. For example, if you wanted to make a <h1> element with the id of my-h1 appear fat in CSS, you could write the following:


#my-h1 {
  font-weight: 900;
}

This will set the font weight of the <h1> element with the id of my-h1 to 900, making it appear much thicker and bolder than before. You can also set the font weight of an element using JavaScript and CSS together. For example, if you wanted to make the same <h1> element appear fat using both JavaScript and CSS, you could write the following:


let myH1 = document.querySelector('h1');
myH1.style.fontWeight = 900;

#my-h1 {
  font-weight: 900;
}

This will set the font weight of the <h1> element with the id of my-h1 to 900 using both JavaScript and CSS, making it appear much thicker and bolder than before. As you can see, using the font-weight property in JavaScript and CSS is a great way to make text appear fat and heavy.

Answers (0)