JavaScript – Underline Text in HTML Element

To underline text in HTML Element using JavaScript, get reference to the HTML Element element, and assign element.style.textDecoration property with value of "underline".

In the following example, we will underline the text in HTML Element with id "myElement" in JavaScript, using element.style.textDecoration property.

example.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #myElement {
            border:1px solid #CCC;
            width:100px;
            height:100px;
        }
    </style>
    <meta charset="utf-8">
</head> 
<body>
    <h2>Underline text in HTML Element using JavaScript</h2>
    <div id="myElement">Hello World!</div>
    <br>
    <button type="button" onclick="changeStyle()">Click Me</button>
    <script>
    function changeStyle(){
        var element = document.getElementById("myElement");
        element.style.textDecoration = "underline";
    }
    </script>
</body>
</html>

Conclusion

In this JavaScript Tutorial, we learned how to underline text in a HTML Element using JavaScript.