CODEWITHSUNDEEP
jquerycss
Jack
Jack

Reputation: 130

how to set css of text decoration strikethrough to red color using javascript

I want to have a red strikethrough, but it still ends up black. This is what I tried:

.redRow {
    text-decoration: line-through;
    color: red;
}

Javascript code is:

function getCurrentBinRow(elem) {
    $(elem).closest('tr').toggleClass('redRow');
}

Upvotes: 2

Views: 2744

Answers (4)

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7246

Try to edit your CSS first, setting the color of a td in black and then you can apply your jQuery function:

function getCurrentBinRow(elem) {
  $(elem).closest('tr').toggleClass('redRow');
}

$(document).ready(function() {
  getCurrentBinRow('td');
});
td {
  color: black;
}
.redRow {
  text-decoration: line-through;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td>TEST</td>
  </tr>
</table>

JSFIDDLE

Upvotes: 1

Tjaart van der Walt
Tjaart van der Walt

Reputation: 5179

If you need to do this on a onclick event.

<label onclick="addStrikethrough(this)">Test</label>
function addStrikethrough(element){
 element.className = element.className + ' redRow';
}

The javascript function needs to be declared in the global namespace.

The css

.redRow {
 text-decoration: line-through;
 color: red;
}

Upvotes: 0

Raja Sekar
Raja Sekar

Reputation: 2130

You have to give line through and color of line through, to the parent and the content should be in child element.

<span style="text-decoration: line-through; color: red;">
 <span style="color: #CCC;">Your content</span>

So make your markup accordingly or please give a working fiddle.

I made it inline styles, Please move it to a class and make work with your stuff.

Check this link for sample

Upvotes: 0

stanze
stanze

Reputation: 2480

Styled Text Decoration Using Javascript, 

document.getElementById('redRow').style.textDecoration = "line-through";

Upvotes: 3

Related Questions