Javascript Reference - HTML DOM Style textDecorationStyle Property

The textDecorationStyle property sets or gets line style for text decoration.

Browser Support


`textDecorationStyle`	No	No	No (Use MozTextDecorationStyle)	No	No

Syntax

Return the textDecorationStyle property:

var v = object.style.textDecorationStyle

Set the textDecorationStyle property:

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

Property Values

Value	Description
solid	Default value. Single line
double	double line
dotted	dotted line
dashed	dashed line
wavy	wavy line
initial	Set to default value.
inherit	Inherit from parent element.

Technical Details

Default Value:	solid
Return Value:	A String representing the text-decoration-style property
CSS Version	CSS3

Example

The following code shows how to display a wavy line under text.


<!DOCTYPE html>
<html>
<head>
<style>
p#myP {<!--  w  ww.j  a v a2  s.  c  o m-->
    text-decoration: underline;
}
</style>
</head>
<body>
<p id="myP">Hello world!</p>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myP").style.MozTextDecorationStyle = "wavy"; // Code for Firefox
    document.getElementById("myP").style.textDecorationStyle = "wavy";
}
</script>
</body>
</html>

The code above is rendered as follows: