How to check if css property is set?

Question

As per the title really.

If notice that if I check $(elem).css('margin-top') it returns 0px even though I haven't explicitly set this style, either inline or in a stylesheet.

Basically I am setting the margin each time I hover over an element (to vertically align some content) so would rather just do this once.

I can't set the alignment on page load because the elements are hidden (display:none) so it needs to be done at the time they are displayed.

Actually the margin is set and working even when it is not displayed. jsfiddle.net/ZnbCn — Bakudan
– Bakudan, Commented Jun 15, 2011 at 16:48

Spycho · Accepted Answer · 2011-06-15 16:25:03Z

4

if(!$(elem).data('hasSetMargin')){
    $(elem).css('margin-top', someValue);
    $(elem).data('hasSetMargin', true);
}

answered Jun 15, 2011 at 16:25

Spycho

7,7983 gold badges36 silver badges55 bronze badges

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

Comments

willvv · Accepted Answer · 2011-06-15 16:25:12Z

2

What's the problem with setting it several times?

It looks like you're trying to early-optimize your code.

answered Jun 15, 2011 at 16:25

willvv

8,67716 gold badges69 silver badges103 bronze badges

1 Comment

Ben Foster Over a year ago

I wouldn't class this as early optimization. My requirements are to set it once. If there is a simple way of doing that rather than performing the margin calculation on every hover, then that is the option I would like to take.

Jon · Accepted Answer · 2011-06-15 16:30:41Z

1

It's not easy to tell because there are many sources which affect the value of a style such as margin-top.

However, you don't need to tell really because:

Setting it more than once should do no harm in your case.
You can improve your code by adding/removing/toggling HTML classes (addClass/removeClass/toggleClass) and styling the elements with pure static CSS (using class selectors) instead of setting the styles yourself. This has the added benefit of making your code readable.

Regarding the readability -- what would you rather read? This:

function() {
    $(selector).css('margin-top', '10px').css('border', '2px red solid');
}

or this:

function() {
    $(selector).addClass('update-pending');
}

answered Jun 15, 2011 at 16:30

Jon

439k85 gold badges756 silver badges820 bronze badges

1 Comment

Ben Foster Over a year ago

unfortunately I can't use classes. The margin is calculated based on the contents of an element so it's not a question of just adding a css class. Whilst you say there is no harm setting the margin more than once, it still seems unnecessary. @Spycho's solution may be the solution to this.

Collectives™ on Stack Overflow

How to check if css property is set?

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related