HTML DOM Style fontWeight Property
Last Updated :
22 Aug, 2023
The fontWeight style property in HTML DOM is used to set or return the thickness of characters in a word that should appear.
Syntax:
- It returns the fontWeight property.
object.style.fontWeight
- It sets the fontWeight Property.
object.style.fontWeight = "normal | lighter | bold | bolder | value | initial | inherit"
Property Values:
Value |
Description |
normal |
Default value of font |
lighter |
Lighter than normal |
bold |
Bolder than normal |
bolder |
Bolder than bold |
value |
Define from 100 to 900 where 400 is normal value |
initial |
Set to its default |
inherit |
Inherit property from parent element |
Return value: It returns the boldness of the font of the string.
Example 1:
html
<!DOCTYPE html>
< html >
< head >
< title >HTML DOM Style fontWeight Property </ title >
</ head >
< body style = "text-align: center;" >
< h1 style = "color: green; font-weight: bold;"
id = "GFG" >
GeeksforGeeks
</ h1 >
< h2 >HTML DOM Style fontWeight Property </ h2 >
< br >
< button type = "button" onclick = "myGeeks()" >
Change the Style
</ button >
< script >
function myGeeks() {
// Set property for "h1" tag form
// 'bold' to 'lighter'
document.getElementById("GFG")
.style.fontWeight = "lighter";
}
</ script >
</ body >
</ html >
|
Output:
Example 2:
html
<!DOCTYPE html>
< html >
< head >
< title >HTML DOM Style fontWeight Property </ title >
</ head >
< body style = "text-align: center;" >
< h1 style = "color: green; font-weight: lighter;"
id = "GFG" >
GeeksforGeeks
</ h1 >
< h2 >HTML DOM Style fontWeight Property </ h2 >
< br >
< button type = "button" onclick = "myGeeks()" >
Change the Style
</ button >
< script >
function myGeeks() {
// Set property for "h1" tag form
// 'lighter' to 'bold'
document.getElementById("GFG")
.style.fontWeight = "bold";
}
</ script >
</ body >
</ html >
|
Output:
Example 3:
html
<!DOCTYPE html>
< html >
< head >
< title >HTML DOM Style fontWeight Property </ title >
</ head >
< body style = "text-align: center;" >
< h1 style = "color: green; font-weight: lighter;"
id = "GFG" >
GeeksforGeeks
</ h1 >
< h2 >HTML DOM Style fontWeight Property </ h2 >
< br >
< button type = "button" onclick = "myGeeks()" >
Change the Style
</ button >
< script >
function myGeeks() {
// Set property for "h1" tag form
// 'lighter' to 1000
document.getElementById("GFG")
.style.fontWeight = "1000";
}
</ script >
</ body >
</ html >
|
Output:
Supported Browsers: The browser supported by HTML DOM Style fontWeight Property are listed below:
- Google Chrome 2 and above
- Edge 12 and above
- Firefox 1 and above
- Opera 3.5 and above
- Safari 1 and above
Share your thoughts in the comments
Please Login to comment...