How to change font style using drop-down list in JavaScript ?

To change or set a font style for certain text, the fontFamily CSS property needs to be changed. The fontFamily property sets or returns a list of font-family names for text in an element.

Syntax:

object.style.fontFamily = "font"

To change the font style by option dropdown: The font values can be passed in option tags using option value.

Syntax:

<option value="value">

The value attribute specifies the value to be sent when a form is submitted. So after the value to be sent is selected, we set the fontFamily property for the text in the element to the selected value as specified in the above syntax. In the javascript function, here changeFontStyle(), the fontFamily property value is set to the font value of the option selected. By default, it is set to Times New Roman.



Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Change Font Style by Option
        Dropdown Javascript
    </title>
</head>
  
<body style="text-align:center;">
  
    <div id="output-text">
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
    </div>
  
    <select id="input-font" class="input"
        onchange="changeFontStyle (this);">
  
        <option value="Times New Roman" 
            selected="selected">
            Times New Roman
        </option>
        <option value="Arial">Arial</option>
        <option value="fantasy">Fantasy</option>
        <option value="cursive">cursive</option>
    </select>
  
    <script>
        var changeFontStyle = function (font) {
            document.getElementById(
                "output-text").style.fontFamily
                        = font.value;
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before selecting any option (Initial value – Times New Roman):
  • After selecting an option in dropdown:
  • After selecting another option in dropdown:

full-stack-img




My Personal Notes arrow_drop_up

A Computer Professional aspiring to become one of the finest in the field

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.