CODEWITHSUNDEEP
javascriptjquerycssgoogle-chrome
Aliden
Aliden

Reputation: 451

Chrome text-decoration line-through prevents click

I am programming a web app where clicking on a bit of text should toggle the line-through css style. This works on Firefox, but the click event seems not to fire in Chrome once the style has been applied.

HTML:

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

JS (note that I've used jQuery because that's what I'm using in the app, but a vanilla solution would be acceptable as well):

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

JS Fiddle

Upvotes: 0

Views: 251

Answers (2)

Nirosh Ubeysinghe
Nirosh Ubeysinghe

Reputation: 11

I tried to solve your problem using different way. I think it was succeeded. you can use below mention code to get same output that you want.

  $('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>

I used bind , toggleClass methods for this. As a result js code was simple and it could run efficiently.

Upvotes: 1

Jeremy
Jeremy

Reputation: 521

In CSS3, text-decoration has multiple parts. In your particular case, the read $(this).css("text-decoration") returns line-through solid rgb(0, 0, 0).

Instead, try changing the if condition to $(this).css("text-decoration-line") to get only the line style part of the text decoration.

Upvotes: 3

Related Questions