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

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

Last Updated : 03 Jun, 2020

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:

<!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> 

Output:

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

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

S

sayaliparulekar

News

Improve

Article Tags :

Similar Reads

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 pa

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

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 me

How to Get Selected Value in Dropdown List using JavaScript?

A dropdown list is an HTML element that allows users to select one option from a list of options. The <select> and <option> tags are used to create dropdown lists in HTML. In this article, we will see how to get selected value from dropdown list using JavaScript. Basic HTML Structure for

How to change style/class of an element using JavaScript ?

In this article, we will learn how we can change the style/class of an element. If you want to build a cool website or app then UI plays an important role. We can change, add or remove any CSS property from an HTML element on the occurrence of any event with the help of JavaScript. There are two com

How To Create A Cascading Dropdown List Using JavaScript?

The Cascading dropdown lists are used to display options in a secondary dropdown based on the selection made in a primary dropdown. This is useful in forms where users need to select categories or locations in the hierarchical manner. For example: selecting a country might reveal states or provinces

How to change font-weight of a text using JavaScript ?

In this article, we will set the font-weight of a text dynamically using JavaScript. Ti change the font weight dynamically, we use HTML DOM Style fontWeight property. Syntax: object.style.fontWeight = "value" Property Values: normal: The font weight is the default value.lighter: The font weight is t

JavaScript - How to Create Dropdown List?

The dropdown list is a toggleable menu that allows to user to choose one option from multiple. The dropdown list is basically a button, when the user clicks on that, it expands downward and shows its sub-elements, from which users can select any one of them according to their preferences. Creating D

How to change Selected Value of a Drop-Down List using jQuery?

We will change the default selected value of the dropdown using jQuery. In an HTML select tag, the default selected value is the value given to the first option tag. With jQuery, it is easy to change the selected value from a drop-down list. Below are the methods to change the selected value of a dr

How to get selected text from a drop-down list using jQuery?

In this article, we will learn how we can get the text of the selected option in a select tag using jQuery. There are two ways in jQuery that we can use to accomplish this task. Table of Content Using the val() method By using option:selected selector and text() method togehterUsing the val() method

How to Change Text Inside all HTML Tags using JavaScript ?

In this article, we will learn how to change the text content inside all HTML tags using JavaScript. This skill is valuable when you need to dynamically modify the text displayed on a web page. which can be useful for various scenarios like updating content, internationalization, or creating dynamic

翻译：