Javascript DOM CSS Style textDecorationLine Property

Introduction

Display paragraphs with a line on top: 

document.getElementById("myP").style.textDecorationLine = "overline";

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

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
p#myP {//from   w  w  w.  j ava 2s. c om
  text-decoration: underline;
}
</style>
</head>
<body>

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

The textDecorationLine property sets or gets what type of line that the decoration will have.

Property Values

ValueDescription
none Default. Specifies no line for the text-decoration
underlinea line will be displayed under the text
overline a line will be displayed over the text
line-through a line will be displayed through the text
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The textDecorationLine property returns a String representing the text-decoration-line property of an element.




PreviousNext

Related