HTML | DOM Style fontSize Property
The fontSize property is used to set or get the font size of characters in a word should appear.
Syntax:
- It returns the fontSize property.
object.style.fontSize
- It sets the fontSize Property.
object.style.fontSize = "value|initial|inherit"
Property Values:
| Value | Description |
|---|---|
| xx-small x-small small medium large x-large xx-large | Predefine sizes of font |
| smaller | Decreases by one relative unit of the font-size |
| larger | Increases by one relative unit of the font-size |
| length | Font-size in length unit |
| % | % of the parent element’s font size |
| initial | Set default value |
| inherit | Inherit property from its parent value |
Return value: It returns the font size of the text of element.
Example-1: Change font size into small.
html
<!DOCTYPE html><html><head> <title>DOM Style fontSize Property </title></head><body> <center> <p style="color: green; width: 100%; font-size: 30px; font-weight: bold;" id="Geek1"> GeeksForGeeks </p> <h2>DOM Style fontSize Property </h2> <br> <button type="button" onclick="myGeeks()"> Click to change </button> <script> function myGeeks() { // Change font size in to small. document.getElementById( "Geek1").style.fontSize = "small"; } </script> </center></body></html> |
Output:
- Before click on button:
- After click on button:
Example-2: Change font-size into xx-large.
html
<!DOCTYPE html><html><head> <title>DOM Style fontSize Property </title></head><body> <center> <p style="color: green; width: 100%; font-size: 10px; font-weight: bold;" id="Geek1"> GeeksForGeeks </p> <h2>DOM Style fontSize Property </h2> <br> <button type="button" onclick="myGeeks()"> Click to change </button> <script> function myGeeks() { // change into xx-large. document.getElementById( "Geek1").style.fontSize = "xx-large"; } </script> </center></body></html> |
Output:
- Before click on button:
- After click on button:
Example-3: Change font-size using length unit.
html
<!DOCTYPE html><html><head> <title>DOM Style fontSize Property </title></head><body> <center> <p style="color: green; width: 100%; font-size: 10px; font-weight: bold;" id="Geek1"> GeeksForGeeks </p> <h2>DOM Style fontSize Property </h2> <br> <button type="button" onclick="myGeeks()"> Click to change </button> <script> function myGeeks() { // Change font size from // from 10px to 30px document.getElementById( "Geek1").style.fontSize = "30px"; } </script> </center></body></html> |
Output:
- Before click on button:
- After click on button:
Example-4: Change font-size using ‘%’
html
<!DOCTYPE html><html><head> <title>DOM Style fontSize Property </title></head><body> <center> <p style="color: green; width: 100%; font-size: 10px; font-weight: bold;" id="Geek1"> GeeksForGeeks </p> <h2>DOM Style fontSize Property </h2> <br> <button type="button" onclick="myGeeks()"> Click to change </button> <script> function myGeeks() { // Change font-size from 100% to 200% document.getElementById( "Geek1").style.fontSize = "200%"; } </script> </center></body></html> |
Output:
- Before click on button
- After click on button
Supported Browsers: The browser supported by HTML | DOM Style fontSize Property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 5.5
- Mozilla firefox 1
- Opera 7
- Safari 1
Please Login to comment...