Question

我正在编写一个Web应用程序，点击一些文本应该切换line-through css样式。这适用于Firefox，但在应用样式后，click事件似乎不会在Chrome中触发。

HTML：

<script>
    $(document).ready({
        $(".liner").click(toggleStrikethrough);
    });
<div class="liner">
    Hello World
</div>

JS（请注意我已经使用过jQuery，因为这是我在应用中使用的内容，但也可以使用vanilla解决方案）：

function toggleStrikethrough()
{
    if($(this).css("text-decoration") != "line-through")
        $(this).css("text-decoration","line-through");
    else
        $(this).css("text-decoration","");
}

JS Fiddle

Answer 1

在CSS3中，text-decoration有多个部分。在您的特定情况下，阅读$(this).css("text-decoration")会返回line-through solid rgb(0, 0, 0)。

相反，请尝试将if条件更改为$(this).css("text-decoration-line")，以仅获取文本修饰的线条部分。

Answer 2

我试图用不同的方式解决你的问题。我认为它成功了。您可以使用下面提到的代码来获得您想要的相同输出。

  $('div').bind('click',function(){
        $(this).toggleClass('liner');
   });

.liner{
    text-decoration:line-through;
}

<!doctype html>
    <html lang="en">
    
<head>
    <meta charset="utf-8">
    <title>jQuery Exzmple</title>
    <style>

    </style>    
</head>
<body>
     <div class="liner">Hello World</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>
</html>

我为此使用了bind，toggleClass方法。因此，js代码很简单，可以高效运行。

Chrome文字装饰直通线可防止点击

2 个答案: