Style fontSize Property
The fontSize property sets or returns the font size of the text.
Browser Support
Syntax
Return the fontSize property:
Set the fontSize property:
Property Values
| Value | Description |
|---|---|
| xx-small x-small small medium large x-large xx-large | Sets the size of the font to different fixed sizes, from xx-small to xx-large |
| smaller | Decreases the font-size by one relative unit |
| larger | Increases the font-size by one relative unit |
| length | Defines the font-size in length units |
| % | Sets the font-size to a % of the parent element’s font size |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | medium |
|---|---|
| Return Value: | A String, representing the font size of the text in the element |
| CSS Version | CSS1 |
More Examples
Example
A demonstration of possible values:
var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById(«demo»).style.fontSize = listValue;
Example
Return the font size of an element:
Related Pages
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
How to change font size using JavaScript
In this article, I will tell you how to change font size using JavaScript. To change font size in JavaScript, we will use the style property. Also, we will use the getElementById method to access the elements.
HTML DOM
Do you know DOM? OK, I will tell you…
DOM stands for D ocument O bject M odel.
It is a standard using which we can add, delete, get or change elements of HTML. Isn’t it cool!!
So, let’s first learn how we can access the element of the DOM.
There are three identifiers by which we can access elements – 1. By their tag name 2. By the Classes attached to them or 3. By the Id assigned to the element.
I have used Id identifier here.
The getElementById Method
To access the element using Id present in the element we use getElementById() method.
getElementById(): To find the element using the Id assigned to it.
var span = document.getElementById("span"); This method will target the id of the span tag.
The style property to change font size in JavaScript
Well, we can change the font size to do so we use the style property of the element.
Let’s see, how this style property looks like…
The syntax of which is as follows:
element.style.CSSProperty = value;
This will make the font size of the text equal to 25 pixel
Thus our entire code to change font size using JavaScript
CODESPEEDY You can Also Read:
Style fontSize Property
The fontSize property sets or returns the font size of the text.
Browser Support
Syntax
Return the fontSize property:
Set the fontSize property:
Property Values
| Value | Description |
|---|---|
| xx-small x-small small medium large x-large xx-large | Sets the size of the font to different fixed sizes, from xx-small to xx-large |
| smaller | Decreases the font-size by one relative unit |
| larger | Increases the font-size by one relative unit |
| length | Defines the font-size in length units |
| % | Sets the font-size to a % of the parent element’s font size |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | medium |
|---|---|
| Return Value: | A String, representing the font size of the text in the element |
| CSS Version | CSS1 |
More Examples
Example
A demonstration of possible values:
var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById(«demo»).style.fontSize = listValue;
Example
Return the font size of an element:
Related Pages
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
How to Change Font Size of HTML Element in JavaScript?
To change the font size of a HTML Element using JavaScript, get reference to this HTML Element element, and assign required font size value to the element.style.fontSize property.
In the following example, we will change the font size of HTML Element with id «myElement» to «25px» , in JavaScript, using element.style.fontSize property.
example.html
Conclusion
In this JavaScript Tutorial, we learned how to change the font size of a HTML Element using JavaScript.
Related Tutorials
- How to Change Border Color of HTML Element in JavaScript?
- How to Change Border Radius of HTML Element in JavaScript?
- How to Change Border Style of HTML Element in JavaScript?
- How to Change Border Width of HTML Element in JavaScript?
- How to Change Bottom Border of HTML Element in JavaScript?
- How to Change Font Color of HTML Element in JavaScript?
- How to Change Font Family of HTML Element in JavaScript?
- How to Change Font Weight of HTML Element in JavaScript?
- How to Change Height of HTML Element in JavaScript?
- How to Change Left Border of HTML Element in JavaScript?
- How to Change Margin of HTML Element in JavaScript?
- How to Change Opacity of HTML Element in JavaScript?
- How to Change Padding of HTML Element in JavaScript?
- How to Change Right Border of HTML Element in JavaScript?
- How to Change Text in HTML Element to Bold in JavaScript?
- How to Change Text in HTML Element to Italic in JavaScript?
- How to Change Top Border of HTML Element in JavaScript?
- How to Change Width of HTML Element in JavaScript?
- How to Change the Background Color of HTML Element in JavaScript?
- How to Change the Border of HTML Element in JavaScript?
- How to Clear Inline Style of HTML Element in JavaScript?
- How to Get Children of an HTML Element in JavaScript?
- How to Get Class Names of an HTML Element as List in JavaScript?
- How to Get Class Names of an HTML Element as String in JavaScript?
- How to Get First Child of an HTML Element in JavaScript?
- How to Get Height of an HTML Element in JavaScript?
- How to Get Last Child of an HTML Element in JavaScript?
- How to Get Next Sibling of an HTML Element in JavaScript?
- How to Get Previous Sibling of an HTML Element in JavaScript?
- How to Get Width of an HTML Element in JavaScript?
- How to Hide HTML Element in JavaScript?
- How to Insert Element in Document after Specific HTML Element using JavaScript?
- How to Iterate over Children of HTML Element in JavaScript?
- How to Tag Name of an HTML Element in JavaScript?
- How to Underline Text in HTML Element in JavaScript?
- How to get Attributes of HTML Element Element in JavaScript?
- How to get Number of Child Elements of this HTML Element in JavaScript?
- JavaScript – Change Style of HTML Element