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: