Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
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
object.style.textDecorationStyle = "solid" | "double" | "dotted" | "dashed" | "wavy" | "initial" | "inherit";
Parameters
- solid ? Single line display (default).
- 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 return value is a string representing the text-decoration line style.
Example 1: Setting Text Decoration Style
This example demonstrates setting the text-decoration style to double with a red color:
<!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: Interactive Style Selector
In this program, 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.
<!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="7">
<option>dotted</option>
<option>dashed</option>
<option>double</option>
<option selected="selected">solid</option>
<option>wavy</option>
<option>initial</option>
<option>inherit</option>
</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 txtDecStylUsrEl=document.getElementById("txtDecStylEl");
txtDecStylUsrEl.style.textDecorationStyle=txtDecStylSelStat;
// Firefox browser compatibility
txtDecStylUsrEl.style.MozTextDecorationStyle=txtDecStylSelStat;
txtDecStylUsrEl.innerHTML="You have set the text-decoration line style to <b>" + txtDecStylSelStat + "</b>";
}
</script>
</html>
Example 3: Getting Text Decoration Style
This program shows how to retrieve the current text-decoration line style:
<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 txtDecStylGetEl=document.getElementById("txtDecStylGetEl");
var txtDecStylGetOp=document.getElementById("txtDecStylGetOp");
txtDecStylGetOp.innerHTML="The text-decoration line style is: " + txtDecStylGetEl.style.textDecorationStyle;
}
</script>
</html>
Browser Compatibility
The textDecorationStyle property is supported by all modern browsers. For Firefox compatibility, you may also need to set the MozTextDecorationStyle property.
Conclusion
The textDecorationStyle property provides an easy way to customize the appearance of text decoration lines. Use it to create various visual effects like dotted, dashed, or wavy underlines.
1K+ Views
