Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to set the decoration of a text with JavaScript?

Javascript Object Oriented Programming Front End Technology

Use the textDecoration property in JavaScript to decorate text. This property allows you to add underlines, overlines, strikethrough effects, and more to any text element.

Syntax

element.style.textDecoration = "value";

Common textDecoration Values

Value Effect
underline Adds line below text
overline Adds line above text
line-through Strikes through text
none Removes decoration

Example: Basic Text Decoration

<!DOCTYPE html>
<html>
<head>
    <title>Text Decoration Example</title>
</head>
<body>
    <div id="myText">This is demo text.</div><br>
    
    <button onclick="setUnderline()">Underline</button>
    <button onclick="setOverline()">Overline</button>
    <button onclick="setStrikethrough()">Strikethrough</button>
    <button onclick="removeDecoration()">Remove</button>
    
    <script>
        function setUnderline() {
            document.getElementById("myText").style.textDecoration = "underline";
        }
        
        function setOverline() {
            document.getElementById("myText").style.textDecoration = "overline";
        }
        
        function setStrikethrough() {
            document.getElementById("myText").style.textDecoration = "line-through";
        }
        
        function removeDecoration() {
            document.getElementById("myText").style.textDecoration = "none";
        }
    </script>
</body>
</html>

Multiple Decorations

You can apply multiple decorations by separating values with spaces:

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Text Decorations</title>
</head>
<body>
    <p id="multiText">Text with multiple decorations</p>
    
    <button onclick="applyMultiple()">Apply Multiple</button>
    
    <script>
        function applyMultiple() {
            document.getElementById("multiText").style.textDecoration = "underline overline";
        }
    </script>
</body>
</html>

Key Points

  • The textDecoration property affects the visual appearance of text
  • Changes apply immediately when the property is set
  • Multiple decoration values can be combined with spaces
  • Use "none" to remove existing decorations

Conclusion

The textDecoration property provides an easy way to add visual emphasis to text elements. Use it to create underlines, overlines, or strikethrough effects dynamically with JavaScript.

Updated on: 2026-03-15T23:18:59+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements