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:
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:
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:
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:
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
Last Updated :
08 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...