！important和display：none和.height（）怪異

Question

昨天我在使用一段JS代碼時發現了一些奇怪的東西。 我有一個隱藏的div （ display:none ），我在JS的一些計算中使用它的高度。 這一切都很好，直到我添加了我的“隱藏”類（ display:none !important ）。

突然，高度始終為0 。 在顯示屏上沒有其他任何變化!important 。

經過一番挖掘，我把問題縮小到了一些我覺得很奇怪的東西：

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

我創建了一個非常基本的JSFiddle來隔離它。 它還使用香草JS來獲得高度，這看起來很好/正如預期的那樣。

似乎jQuery錯誤地報告了不可見DIV的高度，而且!important行為正確。

這是jQuery中的錯誤嗎？

Answer 1

我不認為這是jQuery中的一個錯誤，jQuery設置display block一小段時間來計算height ，當你設置!important甚至是ovverriden，那就是全部。

我想我們需要更多解釋

目前基本上沒有辦法讓height從DOM元素，如果它不具有任何高度。 因此，當display為none ， height不存在或zero 。

在jQuery中，如果display為none ，我們可以將display設置為block一小段時間以獲得height ，在此inline樣式中通常由jQuery更改。

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

然后是height ，但是此時如果你在css中設置了display:none!important ，這個內聯樣式將不起作用，並且height計算變為zero 。

在我個人看來，最好不要使用！重要因為它使您的代碼/演示文稿難以閱讀。 Css通常有多種方式來覆蓋樣式。

如果您仍想繼續，內聯!important可能會覆蓋您的樣式，並使用jQuery show為第二種技術自己計算高度，或者只是覆蓋jQuery函數來計算高度:)