javascript - !important and display:none and .height() weirdness - Stack Overflow

admin管理员组

文章数量:1345088

I discovered something weird yesterday when working with a piece of JS code. I had a div that was hidden (display:none), and I was using the height of it in some calculations in JS. This was all working fine, until I added my "hidden" class (which has display:none !important).

Suddenly the height was always 0. There were no other changes than !important on the display.

After some digging I've narrowed the problem down to something I find rather weird:

#b { display:none; }            /* reported height is 36 */
#c { display:none !important; } /* reported height is 0  */

I've created a very basic JSFiddle to isolate this. It also uses vanilla JS to get height, which seems to work just fine / as expected.

It seems like jQuery incorrectly reports height on invisible DIVs, and that !important behaves correctly.

Is this a bug in jQuery?

I discovered something weird yesterday when working with a piece of JS code. I had a div that was hidden (display:none), and I was using the height of it in some calculations in JS. This was all working fine, until I added my "hidden" class (which has display:none !important).

Suddenly the height was always 0. There were no other changes than !important on the display.

After some digging I've narrowed the problem down to something I find rather weird:

#b { display:none; }            /* reported height is 36 */
#c { display:none !important; } /* reported height is 0  */

I've created a very basic JSFiddle to isolate this. It also uses vanilla JS to get height, which seems to work just fine / as expected.

It seems like jQuery incorrectly reports height on invisible DIVs, and that !important behaves correctly.

Is this a bug in jQuery?

• javascript
• jquery
• css

Share Improve this question Follow edited Feb 25, 2014 at 9:04 Hashem Qolami 99.6k2727 gold badges155155 silver badges165165 bronze badges asked Feb 25, 2014 at 8:30 Eirik HoemEirik Hoem 1,31077 silver badges1414 bronze badges 6

• Most likely your display: none; without !important gets overruled. Display none should indeed return 0 – timo Commented Feb 25, 2014 at 8:37
• possible duplicate of jQuery: height()/width() and "display:none" – DAC84 Commented Feb 25, 2014 at 8:37
• @user3008011 No, see the fiddle. – Eirik Hoem Commented Feb 25, 2014 at 8:38
• @DAC84 That does not cover the !important usage – Eirik Hoem Commented Feb 25, 2014 at 8:41
• If you manually set a height, it reports it. jsfiddle/kZ3ee/6 – Derek Commented Feb 25, 2014 at 8:43

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 14

I dont think this is a bug in jQuery, jQuery sets display to block for a fraction of a second to calculate height, when you set !important even that is ovverriden, thats all.

I guess we need some more explanation

There is basically no way to get the height of an element from DOM if it doesn't have any height. So when display is none, the height is nonexistent or zero.

In jQuery if display is none, we can just set display to block for a fraction of a second to get the height, during this inline style is altered as usually done by jQuery.

<div id="something" style="display:block">/div>

And then height is taken, but at this time if you have set display:none!important in css this inline style wont work, and height calculated bees zero.

In my personal opinion its always better not to use !important as it makes your code/presentation hard to read. Css usually has multitude of ways to override styles.

If you still want to proceed, an inline !important might override your style, and calculate the height by yourself using the jQuery show for a second technique, or just override the jQuery function to calculate height :)

本文标签： javascriptimportant and displaynone and height() weirdnessStack Overflow