How to Change Font Size in Java Script

Updated June 02, 2017

JavaScript is a client-side programming language that many website designers use to manipulate layout, text and images on a Web page. JavaScript can be used to change the size of a font when the user clicks a button or when the page is loaded. This is helpful when you want to make some part of the Web page content stand out. To make the font larger, the content is wrapped in a "div" tag and the JavaScript code will make the font larger within that block of HTML.

Open your HTML page in a text editor. You can use a simple, plain text editor like Notepad to edit JavaScript, or you can use more advanced applications like Notepad++, Visual Studio and Dreamweaver.

Wrap a div tag around the text you want to edit. This allows you to change the font size of a specific area in your Web page without distorting the layout with a global font size change. The code below creates a div named "myDiv":

My website text

Create the JavaScript function. To change a font size in your div tag, you need to set the "fontsize" property. The code below changes the div's font size: function change Size() { document.getElementbyId("myDiv").font Size = "12px"; }

Add a button to the page to let the user choose to change the font size. To add the button and call the new JavaScript function, use the code below:

Save the file and open the page in your Web browser. Test the new code by clicking the button. The font size increases in the div tag.

Cite this Article A tool to create a citation to reference this article Cite this Article

About the Author

Lysis is the pen name for a former computer programmer and network administrator who now studies biochemistry and biology while ghostwriting for clients. She currently studies health, medicine and autoimmune disorders. Lysis is currently pursuing a Ph.D. in genetic engineering.