Javascript DOM CSS Style textDecorationStyle Property

Introduction

Display a wavy line under the paragraph: 

document.getElementById("myP").style.textDecorationStyle = "wavy";

Click the button to change the text-decoration-style of the paragraph.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
p#myP {/*from  w w  w.j  a v a  2s . com*/
  text-decoration: underline;
}
</style>
</head>
<body>

<p id="myP">
Hello world!
</p>
<button onclick="myFunction()">Test</button>
<script>
function myFunction() {
  document.getElementById("myP").style.textDecorationStyle = "wavy";
}
</script>
</body>
</html>

The textDecorationStyle property sets or gets how the line, if any, will display.

Property Values

Value Description
solid Default. The line will display as a single line
double a double line
dotted a dotted line
dashed a dashed line
wavya wavy line
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The textDecorationStyle property returns a String representing the text-decoration-style property of an element.




PreviousNext

Related