javascript if something has css attribute of value

Question

I would like to execute an animation when the page loads but only when a css attribute has a value of something. The animation works fine without the if statement. Here is my code:

$(document).ready(function() {

    if($("h1").css('font-size') == '36px'){

        $("h1").animate({
          "font-size" : "20px"
        }, 750);

    }

});

If you add console.log($("h1").css('font-size')); what does it show? — j08691
– j08691, Commented Sep 24, 2013 at 17:05
when you know that it is not working because of "if statement" then your first think should go towards checking why it is not working and do console.log check as mentioned in above comment. — Mr_Green
– Mr_Green, Commented Sep 24, 2013 at 17:06
@user2812034 well, then there you go... you know why the condition is not meant. Do you not know why the font-size is 51px? — Gray
– Gray, Commented Sep 24, 2013 at 17:16

Mr_Green · Accepted Answer · 2013-09-25 03:27:17Z

5

I think you are trying to animate the h1 elements which have font-size : 36px. Then you need to filter those elements before doing the animation as shown below:

$(document).ready(function () {
    $("h1").filter(function () {
        return ($(this).css('font-size') == "36px");
    }).animate({
        "font-size": "20px"
    }, 750);
});

edited Sep 25, 2013 at 3:27

answered Sep 24, 2013 at 17:12

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jonathan Lonowski Over a year ago

Note: element.style[property] will only include inline styles while $(element).css(property) will retrieve computed styles included those inherited from a stylesheet.

Mr_Green Over a year ago

@JonathanLonowski updated.. (keep your comment for future references please)

Gray Over a year ago

I don't feel like this addresses the user's question. This is an alternate solution, but it doesn't explain why the condition is false. If this works, then shouldn't the OP's solution work too?

Jonathan Lonowski Over a year ago

@Gray Not exactly. This will test the font-size of each individual <h1> while the snippet in the question only tests the 1st <h1> -- .css(property) can only return the value for 1 element. If actually none of them are 36px, then no this won't animate any of them either. But, that's information the OP hasn't given us.

Gray Over a year ago

Right, I understand that. You hit on what I was getting at. The issue (if you see his comment on the OP) is that the font-size is in-fact not 36px. If it were, then his solution would probably work... see this: jsfiddle.net/V7XtC/2

|

Gray · Accepted Answer · 2013-09-24 17:39:07Z

1

From comments from the OP, it would appear that a stray rule in a stylesheet has caused the font-size to be set to something other than they expected.

The way to determine this can be easily done with your browser's DOM inspector. Generally, you can right click an element, hit inspect (or something like it) and see where the value is being set.

Here are some more specific how-to's for using these:

Chrome - https://developers.google.com/chrome-developer-tools/docs/elements

Firefox - https://developer.mozilla.org/en-US/docs/DOM_Inspector/Introduction_to_DOM_Inspector

Internet Explorer - http://msdn.microsoft.com/library/gg589507(VS.85).aspx

answered Sep 24, 2013 at 17:39

Gray

7,1602 gold badges33 silver badges53 bronze badges

Comments

Jeffpowrs · Accepted Answer · 2013-09-24 17:06:52Z

1

if( $('h1').eq(0).css('<property>') ) {
 ...
}

answered Sep 24, 2013 at 17:06

Jeffpowrs

4,5904 gold badges32 silver badges49 bronze badges

1 Comment

Barmar Over a year ago

Isn't this equivalent to what he wrote? .css() returns the value of the property from the first element in the collection. He probably needs a value other than 0.

Nishad K Ahamed · Accepted Answer · 2013-09-24 17:20:09Z

1

remove the 'px' from the code when equating the font size:

if($("h1").css('font-size') == '36'){

        $("h1").animate({
          "font-size" : "20px"
        }, 750);

answered Sep 24, 2013 at 17:20

Nishad K Ahamed

1,39415 silver badges25 bronze badges

Collectives™ on Stack Overflow

javascript if something has css attribute of value

4 Answers 4

8 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related