如何使用javascript将文本装饰删除线的css设置为红色

Question

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');
}

Answer 1

使用Java风格的文字装饰，

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

Answer 2

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

Answer 3

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

Answer 4

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;
}