How to Underline Text of a Div Element in JavaScript ?

How to Underline Text of a Div Element in JavaScript ?

At 6/7/2023

Underlining text of a div can help to emphasize certain words or phrases and make them stand out from the rest of the content on the page.

To underline text in a div element using JavaScript, you can use the style property of div to text-decoration.

Text Decoration: The text-decoration property is used to specify whether the text should be Underline, overline, line-through, or blink. Underline and overline decorations are positioned under the text, while line-through is placed above it.

Syntax:

element.style.textDecoration

Example 1: In this example, we add a button when we clicked on the button the text goes to underlined, when button clicked which will call the underlineText() function. This function selects the div element with the ID of underline-text using the getElementById method and then it set the style property to “underline”.

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>Freesad</title>
    <style>
        .gfg {
            padding: 10px;
        }
  
        button {
            padding: 10px 10px 10px 10px;
            background: green;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all linear 0.5s;
        }
  
        button:hover {
            transform: translate(0px, -6px);
        }
    </style>
</head>
  
<body>
    <div class="gfg">
        <div id="underline-text">
            <h1>Welcome To Freesad!!</h1>
        </div>
        <button onclick="underlineText()">
            Click to underline text
        </button>
    </div>
  
    <script>
        function underlineText() {
            // Get the div element
            const divElement = document.getElementById("underline-text");
  
            // Underline the text in the div
            divElement.style.textDecoration = "underline";
        }
  
    </script>
</body>
  
</html>

Output:

How to Underline Text of a Div Element in JavaScript ?

Example 2: In the following example, we first take user input after that when we clicked on the button it will show the output. Get the user input by using the element ID takeInput. and then show output by using the element ID output.

If the input is empty then show the massage. if the user input is not empty, we create a new string with the underlined text.

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>Freesad</title>
    <style>
        .container {
            text-align: center;
        }
  
        .text-div {
            margin: 50px auto;
            width: 80%;
        }
  
        label {
            display: block;
            margin-bottom: 10px;
        }
  
        input[type="text"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%;
            box-sizing: border-box;
            font-size: 16px;
            margin-bottom: 10px;
        }
  
        button {
            padding: 10px 10px 10px 10px;
            margin-bottom: 1rem;
            background: green;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all linear 0.5s;
        }
  
        button:hover {
            transform: translate(0px, -6px);
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1>Underline Text Example</h1>
        <div class="text-div">
            <label for="takeInput">Enter text to underline:</label>
            <input type="text" id="takeInput">
            <button onclick="underlineText()">Click to underline</button>
            <div id="output"></div>
        </div>
    </div>
  
    <script>
        function underlineText() {
            // Get the user input
            const takeInput = document.getElementById("takeInput").value;
  
            // Get the output element
            const output = document.getElementById("output");
  
            // Check if user input is empty
            if (takeInput === "") {
                output.innerHTML = "Please enter some text to underline.";
                return;
            }
  
            // Create a new string with the underlined text
            const underlinedText = "<u>" + takeInput + "</u>";
  
            // Set the innerHTML of the output element to the underlined text
            output.innerHTML = underlinedText;
        }
  
    </script>
</body>
  
</html>

Output

How to Underline Text of a Div Element in JavaScript ?

Copyrights

We respect the property rights of others and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us, or by email at: support@freewsad.com.

More About us