獲取jQuery UI Datepicker的高度和寬度

Question

我正在使用jQuery UI Datepicker小部件。 當用戶更改窗口小部件上的月份或年份時，我的代碼向服務器發出ajax請求，以獲取該月/年的突出顯示日期。 為了向用戶提供網頁正在等待服務器的指示，我正試圖使日期選擇器變灰並顯示加載圖像。 我已經可以完成所有這些了，除了我在獲取灰色部分的高度和寬度以匹配datepicker小部件的高度和寬度方面遇到了問題。

因為每次調用疊加層時，日期選擇器的高度可以根據一個月內的周數來改變，所以我試圖使用jQuery來獲取窗口小部件的高度，然后顯示疊加層。 但是，高度似乎永遠不會與日期選擇器的實際高度相匹配。 以下是我嘗試設置高度的兩種方法。

$('#loading').height($('.ui-datepicker-calendar').height() + $('.ui-datepicker-header').height())

和

$('#loading').height($('.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all').height())

兩者都不奏效。 有沒有人知道我可以通過編程方式獲取jQuery UI Datepicker小部件的高度和寬度？

Answer 1

這是一個很長的鏡頭，因為我無法准確地說出你的意思， the height never seems to match the actual height ，除了它沒有覆蓋整個日期選擇器。 對此的解決方案可能是outerWidth()和outerHeight() 。 這些函數獲取元素的寬度， 包括邊框，填充和（可選）邊距：

$('#loading').height($('.ui-datepicker-calendar').outerHeight(false) + $('.ui-datepicker-header').outerHeight(false))

$('#loading').height($('.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all').outerHeight(false))

outerHeight(false)表示“獲取高度加上填充和邊框，但省略邊距”。 如果要包含邊距，請將其設置為true 。

Answer 2

height()工作正常，問題是其他人編輯了文件並在我不知情的情況下添加了填充。 因此，當我設置高度時，它總是添加了一堆額外的像素，使得我的疊加層對於datepicker小部件來說太大了。 另外，選擇.ui-datepicker-inline就足夠了。 所以我最后的jQuery代碼是：

$('#loading').height($('.ui-datepicker-inline').height());