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

Last Updated : 29 Jul, 2024

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.