Reputation: 71

jQuery CSS Font-Weight Normal Not Working

I've googled for the last two days and browsed this site, too, but found no similar problem. I am new to jQuery and hope this is no duplicate of other posts.

$(this).css("font-weight", "bold"); //this works
$(this).css({"font-weight":"bold"}); //this works as well

$(this).css("font-weight", "normal"); //this doesn't work
$(this).css({"font-weight":"normal"}); //this doesn't work either

Why is it that text font weight cannot be set to NORMAL (in my case)? I use Firefox 17.0.1, but the function to set the font to normal never works in an earlier version of Firefox as well.

UPDATED: My problem was finally solved last night, after browsing this site and found quite a similar thing. A few folks had to search for <b> and </b> in an HTML snippet and I fixed my problem by

Using this: "$(this).find('strong, b').css('font-weight', 'normal')"

Instead of: "$(this).css('font-weight', 'normal')".

Problem solved! Thanks to everyone for lending me a hand yesterday.

Upvotes: 3

Answers (6)

factoradic

Reputation: 83

My code based on your snippet:

<html>
    <head>
    <style type="text/css">
        td a:link {text-decoration: none; color: inherit; }
        td a:visited {text-decoration: none; color: inherit; }
        td a:active {text-decoration: none; color: inherit; }
        td a:hover {text-decoration: underline; color: blue; }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        /*global $, jQuery, document*/
        $(document).ready(function () {
            "use strict";
            $('#text').click(function (event) {
                $(this).css("font-weight", "normal");
                event.preventDefault();
            });
        });
    </script>
    <title>View Data</title>
</head>
<body>
<p id="text" style="font-weight: bold;">Lorem ipsum</p>
</body>
</html>

DEMO

So I think that problem is with this line'td[id="text_linked_to_detail_page"]', maybe try use dot notation. Or check if the ID is certainly unique.

Upvotes: 0

asepm

Reputation: 71

This is the HTML part below PHP code in one of my PHP files.

<html>
    <head>
    <style type="text/css">
        td a:link {text-decoration: none; color: inherit;}
        td a:visited {text-decoration: none; color: inherit;}
        td a:active {text-decoration: none; color: inherit;}
        td a:hover {text-decoration: underline; color: blue;}
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $('td[id="text_linked_to_detail_page"]').click(function(event)
            {
                $(this).css("font-weight", "normal");
                event.preventDefault();
            });
        });
    </script>
    <title>View Data</title>
</head>
<body>
</body>
</html>

Upvotes: 1

Thirumalai murugan

Reputation: 5916

Normat is working fine could you cross check which version of the jquery you are using? give the command so that we also can understand your problem

script

$("#div1").css("font-weight", "bold");
$("#div2").css("font-weight", "normal");
$("#div3").css("font-weight", "bold");
$("#div4").css("font-weight", "");

HTML

<div id="div1" >some text</div>
<div id="div2" >some text</div>
<div id="div3" >some text</div>
<div id="div4" >some text</div>
<input type="button" onclick="javascript:$('#div1').css('font-weight','normal')" value="Normal"/>
<input type="button" onclick="javascript:$('#div1').css('font-weight','bold')" value="Bold"/>

DEMO

Upvotes: 2

factoradic

Reputation: 83

You might have problem with jQuery not css style.

My html:

<p id="text">Lorem Ipsum Dolor Sit Amet</p>
<p id="bold">Click to : bold</p>
<p id="normal">Click to : normal</p>

and jQuery:

function action() {
    "use strict";
    $("#normal").click(function () {
        $("#text").css("font-weight", "normal");
    });
    $("#bold").click(function () {
        $("#text").css("font-weight", "bold");
    });
}

$(document).ready(function () {
    "use strict";
    action();
});

Upvotes: 1