How to change font-weight of a text using 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:

html

<!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-weight of a text using JavaScript ?

S

sayaliparulekar

Improve

Article Tags :

Similar Reads

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 med

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

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

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 Dr

How to Change the Color of HTML Element in JavaScript?

Changing the text color of an HTML element in JavaScript improves the user experience. To change the font color of an HTML element using JavaScript, we use the DOM to access and modify its style properties, allowing for dynamic color changes. Syntax:element.style.color = "green";ApproachSelect the T

How to change style attribute of an element dynamically using JavaScript ?

Given an HTML document and the task is to change the style properties (CSS Properties) of an element dynamically with the help of JavaScript. Approach: Using element.style PropertyThe element.style property is represented by the CSSStyleDeclaration object, which is returned via the style property. S

How to set font size based on window size using JavaScript ?

Given an HTML document and the task is to change the font-size based on the size of the window with the help of JavaScript. Approach 1:First convert the document element font sizes to em or % by using a function.Call this function on every resize of the window. It will change the font size based on

How to Add Text Formatting to a Textarea using JavaScript?

To add text formatting (such as bold, italic, or inserting special characters) to a <textarea> using JavaScript, you can manipulate the selected text or insert formatted text at the cursor position. This can be done by directly modifying the value of the <textarea> based on user interact