HTML DOM Style fontWeight Property
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" > w3wiki </ h1 > < h2 >HTML DOM Style fontWeight Property </ h2 > < br > < button type = "button" onclick = "myBeginner()" > Change the Style </ button > < script > function myBeginner() { // 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" > w3wiki </ h1 > < h2 >HTML DOM Style fontWeight Property </ h2 > < br > < button type = "button" onclick = "myBeginner()" > Change the Style </ button > < script > function myBeginner() { // 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" > w3wiki </ h1 > < h2 >HTML DOM Style fontWeight Property </ h2 > < br > < button type = "button" onclick = "myBeginner()" > Change the Style </ button > < script > function myBeginner() { // 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