如何使用 jQuery 更改“文本装饰”属性？答案

【问题标题】：How to change 'text-decoration' property with jQuery?如何使用 jQuery 更改“文本装饰”属性？
【发布时间】：2012-02-16 16:30:22
【问题描述】：

我有以下结构的表：

<table style=" margin-top: 10px; border: 1px wheat solid; width: 100%; font-size: 10px; font-family: Arial , Verdana;text-shadow:0px 1px 0px #000">
    <tr class="infoRow" style="background:#666666; ">
        <td>Element11 </td>
        <td style="font-size:12px; font-weight:bold; font-family: georgia;">Element12 </td>
        <td><input type="checkbox" class="check" /></td>
    </tr>  
    <tr class="infoRow" style="background:#666666; ">
        <td>Element21 </td>
        <td style="font-size:12px; font-weight:bold; font-family: georgia;">Element22 </td>
        <td><input type="checkbox" class="check" /></td>
    </tr>           
</table>

在检查 <input class="check" ... /> 属性 text-decoration 的值后，我想在下一行添加“下划线”。

$('.check').click(function(){
   $('infoRow').css("text-decoration", "underline");   
});

此代码更改所有行。

提前致谢。

【问题讨论】：

标签： jquery text-decorations

【解决方案1】：

...在下一行上添加“下划线”。

（我的重点）。

要在下行上加下划线，您需要向上到复选框的父行，然后到其兄弟行，然后将css应用于该行：

$(this).closest('tr').next('tr').css('text-decoration', 'underline');

另外，您可能想测试复选框是被选中还是未选中，例如：

$('.check').click(function(){
    $(this).closest('tr').next('tr').css(
        'text-decoration',
        this.checked ? 'underline' : 'none'
    );
});

Live example

【讨论】：

不错的答案。我的 2 美分 - 将class（并在样式表中相应地设置样式）添加到受影响的元素而不是直接使用.css() 方法更改样式是更好的做法。