获取 jQuery UI Datepicker 的高度和宽度答案

【问题标题】：Get the Height and Width of a jQuery UI Datepicker获取 jQuery UI Datepicker 的高度和宽度
【发布时间】：2011-10-02 20:54:03
【问题描述】：

我正在使用 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 小部件的高度和宽度？

【问题讨论】：

试图将vars 与.outerHeight() 或.outerHeight(true) 一起使用？而不是像：$('#loading').height( dP_cal + dP_hea );
首先，我认为您希望在每个 . 类选择器之前有空格（我认为？）。其次，如果您确定选择高度的正确元素，您是否尝试过.outerHeight(true)？
@Jared 我认为在这种情况下没有空格是可以的 - jQuery UI 将很多类放在同一个元素上。
@JamWaffles - 当我输入它时，我不确定，所以感谢您清除它。 :) 我不知道，也许胡须和眼镜对你有用。 :P
@JamWaffles - (Off-topic Chronicles Vol. III, Sunday Edition) 我已经长大了，可以长出一个，但因为我不能（我看起来很邋遢而且大块不会长出in)，我只想说，“……有一天……”

标签： javascript jquery css jquery-ui jquery-ui-datepicker

【解决方案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。

【讨论】：

您的建议无效。我的问题是覆盖太大。这是我从每种高度方法中得到的结果。 height() 194px，outerHeight() 198px（假和真），innerHeight() 196px（假和真）。但是，通过使用控制台，我发现高度接近 120 像素。我通过使用萤火虫的检查元素获得了我在示例代码中使用的选择器。当我将鼠标悬停在代码中的该元素上时，页面上突出显示的部分与小部件高度完全匹配。然而，由于某种原因，我似乎无法使用 jQuery 获得那个高度。
好吧，如果您不给我们一些代码、示例或屏幕截图，我或其他任何人都可以提出其他建议。尝试更改您的 CSS 选择器以查找包含 div 或其他内容的元素。
我赞成您的回答，因为我不知道 innerHeight() 和 outerHeight() 函数。但是，问题是有人在我不知情的情况下编辑了文件并向 css 类添加了填充。
是的，我在上面发布了我的修复。感谢您的帮助。

【解决方案2】：

height() 工作正常，问题是其他人在我不知情的情况下编辑了文件并添加了填充。因此，当我设置高度时，它总是添加了一堆额外的像素，使得我的叠加层对于 datepicker 小部件来说太大了。此外，选择.ui-datepicker-inline 就足够了。所以我最终的 jQuery 代码是：

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

【讨论】：