How to Change Font Size using drop-down List in JavaScript ?

Last Updated : 06 Jun, 2023

To change or set a font size for certain text, the fontSize property needs to be changed. The fontSize property sets or returns a list of fontSize names for text in an element.

CSS font-size property is used to specify the font’s height and size. It affects the size of an element’s text. It has a medium default value and can be applied to any element.

Syntax:

element.style.fontSize = "value"

To change the font size by option dropdown, Option values can be used to pass font size values into option tags.

Syntax:

<option value="px">

Example 1: In the following example, the drop-down list has five options for font size: 8px, 10px, 14px, 20px, and 24px. When the user selects an option the event listener is updated to gfg div by setting its style.fontSize property to the selected value.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <title> 
        How to change font size using 
        drop-down list in JavaScript ? 
    </title> 
  
    <style> 
        h1 { 
            color: green; 
        } 
  
        option { 
            font-size: 1rem; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="gfg"> 
        <h1>Welcome To Geeksforgeeks!!</h1> 
        <p> 
            A Computer Science portal for geeks. 
            It contains well written,well thought 
            and well explained computer 
            science and programming articles. 
        </p> 
    </div> 
    <select id="gfg1"> 
        <option value="8px">8px</option> 
        <option value="10px">10px</option> 
        <option value="14px">14px</option> 
        <option value="20px">20px</option> 
        <option value="24px">24px</option> 
    </select> 
  
    <script> 
        const selectFontSize = document.getElementById("gfg1"); 
        const updateElement = document.getElementById("gfg"); 
  
        selectFontSize.addEventListener("change", function () { 
            const selectedValue = selectFontSize.value; 
            updateElement.style.fontSize = selectedValue; 
        }); 
    </script> 
</body> 
  
</html>

Output:

Example 2: In the following example, the drop-down list contains three options for font size: Small, Medium, and Large. When the user selects an option the event listener is updated to the gfg1 paragraph by setting its style.fontSize property to the corresponding value in the fontSizes object.

HTML

<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> 
        Change font size using in JavaScript ? 
    </title> 
  
    <style> 
        h1 { 
            color: green; 
        } 
  
        option { 
            font-size: 1rem; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="gfg1"> 
        <h1>Welcome To Geeksforgeeks!!</h1> 
        <p> 
            A Computer Science portal for geeks. 
            It contains well written, well thought 
            and well explained computer 
            science and programming articles. 
        </p> 
    </div> 
    <label for="gfg">Select font size:</label> 
    <select id="gfg"> 
        <option value="small">Small</option> 
        <option value="medium">Medium</option> 
        <option value="large">Large</option> 
    </select> 
  
    <script> 
        const selectFontSize =  
            document.getElementById("gfg"); 
  
        const updateElement =  
            document.getElementById("gfg1"); 
  
        const fontSizes = { 
            small: "12px", 
            medium: "16px", 
            large: "20px", 
        }; 
  
        selectFontSize.addEventListener("change",  
        function () { 
            const valueSelect = selectFontSize.value; 
            updateElement.style.fontSize  
                = fontSizes[valueSelect]; 
        }); 
    </script> 
</body> 
  
</html>