How to set the style of the line in a text decoration with JavaScript?

In this tutorial, we shall learn to set the style of the line in a text decoration with JavaScript. To set the style of the line in JavaScript, use the textDecorationStyle property. You can set underline, double, or overline, etc. for the line style. Let us discuss our topic in brief.

Using the Style textDecorationStyle Property

We can set or return the line style in a text decoration with this property.

The major browsers support this property. Firefox adds support with an alternate property named MozTextDecorationStyle.

Syntax

Following is the syntax to set the style of the line in a text decoration using the JavaScript Style textDecorationStyle property −

object.style.textDecorationStyle = solid | double | dotted | dashed | wavy | initial |inherit;

With this syntax, the required text-decoration line style can be set to the element's style.

Parameters

  • solid − Single line display.
  • double − A double line.
  • dotted − A dotted line.
  • dashed − A dashed line.
  • wavy − A wavy line
  • initial − Sets this property to its default value.
  • inherit − Inherits this property from its parent element.

The default value of this property is solid. The return value is a string representing the text-decoration line style.

Example 1

You can try to run the following code to return the style of the line in a text-decoration with JavaScript −

<!DOCTYPE html>
<html>
<body>
   <div id="myText" style="text-decoration: underline;">
      This is demo text.
   </div>
   <br>
   <button onclick="display()"> Set Text Decoration </button>
   <script>
      function display() {
         document.getElementById("myText")
         .style.textDecorationColor="red";
         document.getElementById("myText")
         .style.textDecorationStyle="double";
      }
   </script>
</body>
</html>

Example 2

In this program, we are setting the text-decoration line style to the content of the div element.

We get the text-decoration line style from the user. The style inherit will display the text-decoration line style set to the parent element of our content. In this program, this style is set as dashed.

When the user ticks on the button, we call the function to set the text-decoration line style following the syntax given above.

<!DOCTYPE html>
<html>
<head>
<style>
   #txtDecStylEl{
      text-decoration: underline;
   }
   #txtDecStylParent{
      text-decoration-style: dashed;
   }
</style>
</head>
<body>
   <h3> Setting the style of text-decoration line using the
      <i> textDecorationStyle </i> property
   </h3>
   <div id="txtDecStylParent">
   <div id="txtDecStylEl"> Set the text-decoration line style here.
   </div>
   </div>
   <br>
   <div id="txtDecStylBtnWrap">
      <select id="txtDecStylSel" size="10">
         <option/> dotted
         <option/> dashed
         <option/> double
         <option selected="selected"/> solid
         <option/> wavy
         <option/> initial
         <option/> inherit
      </select>
      <br>
      <p> Select the text-decoration line style and click on the button.</p>
      <button onclick="setTextDecLineStyle();"> Apply </button>
   </div>
   <br>
</body>
<script>
   function setTextDecLineStyle(){
      var txtDecStylSelTag=document.getElementById("txtDecStylSel");
      var txtDecStylSelIndx=txtDecStylSelTag.selectedIndex;
      var txtDecStylSelStat=txtDecStylSelTag.options[txtDecStylSelIndx].text;
      var txtDecStylBtnWrap=document.getElementById("txtDecStylBtnWrap");
      var txtDecStylUsrEl=document.getElementById("txtDecStylEl");
      txtDecStylUsrEl.style.textDecorationStyle=txtDecStylSelStat;//Firefox browser
      txtDecStylUsrEl.style.MozTextDecorationStyle=txtDecStylSelStat;
      txtDecStylUsrEl.innerHTML="You have set the text-decoration line style to <b>" + txtDecStylUsrEl.style.textDecorationStyle + "</b>";
   }
</script>
</html>

Example 3

This program has set the text-decoration line style to the content inside a div element. We display the text-decoration line style to the user when they click on the button following the syntax for getting the style of the text-decoration line.

<html>
<head>
<style>
   #txtDecStylGetEl{
      text-decoration: underline;
   }
</style>
</head>
<body>
   <h3>Getting the style of the text-decoration line using the
      <i> textDecorationStyle </i>property.
   </h3>
   <div id="txtDecStylGetEl" style="text-decoration-style: dashed">
      Get the text-decoration line style of this content.
   </div>
   <br>
   <div id="txtDecStylGetBtnWrap">
      <p> Click on the button to get the style.</p>
      <button onclick="getTextDecStyle();">Get</button>
   </div>
   <br>
   <p id="txtDecStylGetOp"> </p>
</body>
<script>
   function getTextDecStyle(){
      var txtDecStylGetBtnWrap=document.getElementById("txtDecStylGetBtnWrap");
      var txtDecStylGetEl=document.getElementById("txtDecStylGetEl");
      var txtDecStylGetOp=document.getElementById("txtDecStylGetOp");
      txtDecStylGetOp.innerHTML="The text-decoration line style is="+ txtDecStylGetEl.style.textDecorationStyle;
   }
</script>
</html>

In this tutorial, we went through the textDecorationStyle property in JavaScript. To set the style of the text-decoration line, this property is a built-in property in JavaScript and very easy to code.

Updated on: 22-Nov-2022

880 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements