Javascript text decoration line through

Change element textDecoration: line-through in JavaScript

The following code shows how to change element textDecoration: line-through.

Example

 html> head> script language="JavaScript"> function addunderline()!--from w ww . ja v a 2 s . c o m--> head1.style.textDecoration = "underline" > function removeunderline()< head1.style.textDecoration = "none" > function addoverline() < head1.style.textDecoration = "overline" > function addlinethrough() < head1.style.textDecoration = "line-through" >  body> h1 >"head1" onMouseover="addunderline()" onMouseout="removeunderline()" onClick="addoverline()" ondblclick="addlinethrough()">Welcome to this page! P>A lot of interesting text goes here!   

The code above generates the following result.

Источник

Style textDecoration Property

The textDecoration property sets or returns one ore more decorations for a text.

Tip: To specify more than one decoration type for an element, specify a space separated list of decoration types.

Browser Support

Syntax

Return the textDecoration property:

Set the textDecoration property:

Property Values

Value	Description
none	Defines a normal text. This is default
underline	Defines a line under the text
overline	Defines a line over the text
line-through	Defines a line through the text
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	none
Return Value:	A String, representing the decoration added to the text
CSS Version	CSS1

More Examples

Example

Return the text decoration of an element:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Style textDecorationLine Property

The textDecorationLine property sets or returns what type of line, if any, the decoration will have.

Note: You can also set the textDecorationLine using the textDecoration property, which is a short-hand property for the textDecorationLine, textDecorationStyle, and the textDecorationColor properties.

Note: You can also combine more than one value, like underline and overline to display lines both under and over the text.

Browser Support

Syntax

Return the textDecorationLine property:

Set the textDecorationLine property:

Property Values

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

Technical Details

Default Value:	none
Return Value:	A String, representing the text-decoration-line property of an element
CSS Version	CSS3

Источник

textDecoration style property

Specifies or returns the appearance characteristics of text, whether it is underlined, overlined, lined-through or blinking text.

You can specify a space separated list of decoration types, if you want to use more than one for an element.

Syntax:

Possible values:

Description of values:

Use default anchor decoration.

The text content of the element blinks.

Takes the value of this property from the computed style of the parent element.

The text content of the element is displayed with a line through the middle.

No text decoration is used.

The text content of the element is displayed with a line at the top.

The text content of the element is underlined.

Example HTML code 1:

head> style> .example  text-decoration: overline line-through; > style> head> body> a class="example">Text decoration: overline line-throughp> body>

Example HTML code 2:

head> script type="text/javascript"> function ChangeTextDecoration (elem)  var anchor = document.getElementById ("myAnchor"); var checkboxes = document.getElementsByName ("checkboxs"); var decorValue = ""; // Checks all checkbox state for (var i = 0; i < checkboxes.length; i++)  if (checkboxes[i].checked) < decorValue += checkboxes[i].value + " "; > > // If none is checked all other checked out var noneCh = document.getElementsByName("nonecheck"); if (noneCh[0].checked)  for (var i = 0; i < checkboxes.length; i++) < checkboxes[i].checked = false; > decorValue = "none"; > anchor.style.textDecoration = decorValue; > script> head> body> a id="myAnchor">Text decoration samplea> br />br /> Change text-decoration value: br /> input type="checkbox" name="checkboxs" value="blink" onclick="ChangeTextDecoration ();"/>blinkbr /> input type="checkbox" name="checkboxs" value="line-through" onclick="ChangeTextDecoration ();"/>line-throughbr /> input type="checkbox" name="checkboxs" value="overline" onclick="ChangeTextDecoration ();"/>overlinebr /> input type="checkbox" name="checkboxs" value="underline" onclick="ChangeTextDecoration ();"/>underlinebr /> input type="checkbox" name="nonecheck" onclick="ChangeTextDecoration ();" />none body>

Supported by objects:

Источник

Javascript text decoration line through

Last updated: Jan 17, 2023
Reading time · 3 min

# Table of Contents

# Cross out (Strikethrough) Text in React

Use the textDecoration property to strikethrough text in React.

The text-decoration CSS property sets the appearance of decorative lines on text.

Copied! 
const App = () =>  return ( div> h2> span style=textDecoration: 'line-through'>>> bobby span>' '> hadz h2> div> ); >; export default App; 

We used the text-decoration property to cross out text in React.

Notice that multi-word properties are camelCased when specified as inline styles.

The first set of curly braces in the inline style marks the beginning of an expression, and the second set of curly braces is the object containing styles and values.

Copied! 
h2> span style=textDecoration: 'line-through'>>> bobby span>' '> hadz h2> 

When the textDecoration property of an element is set to line-through , it’s text is crossed out.

If you need to do this often, extract the span element into a component that renders its children.

Copied! 
function StrikethroughText(children>)  return span style=textDecoration: 'line-through'>>>children>span>; > const App = () =>  return ( div> h2> StrikethroughText>HelloStrikethroughText> world h2> div> ); >; export default App; 

This code sample achieves the same result. Whatever we pass between the opening and closing tags of the StrikethroughText component will have its text crossed out.

If you also need to set the text color, click on the following link.

# Using a global CSS class to strikethrough text

An alternative solution is to define a strikethrough class in a global CSS file.

Copied! 
.strikethrough  text-decoration: line-through; > 

And here is how we would import the App.css file and use the strikethrough class.

Copied! 
import './App.css'; const App = () =>  return ( div> h2> span className="strikethrough">Hellospan> world h2> div> ); >; export default App; 

This approach enables us to reuse commonly used styles by defining them in a global CSS file.

It’s a best practice to import your global CSS files in your index.js file because then they wouldn’t only get loaded when a certain component is mounted.

# Cross out (Strikethrough) text on Click in React

To cross out text on click:

1. Set the onClick prop on the element.
2. When the element is clicked, check if its text-decoration property is set.
3. If the property is set, remove it, otherwise set it to line-through .

Copied! 
const App = () =>  const handleClick = event =>  if (event.target.style.textDecoration)  event.target.style.removeProperty('text-decoration'); > else  event.target.style.setProperty('text-decoration', 'line-through'); > >; return ( div> p onClick=handleClick>>Walk the dogp> br /> p onClick=handleClick>>Buy groceriesp> div> ); >; export default App; 

We set the onClick on the paragraph elements, so every time they are clicked, the handleClick function is invoked.

Источник