How to Underline Text of a Div Element in JavaScript ?

Last Updated : 07 May, 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>Geeksforgeeks</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 Geeksforgeeks!!</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:

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