javascript - 为什么 Firefox 从这个 CSS 填充值的 parseInt 返回 NaN？

Question

在我正在处理的应用程序中，我们有一个固定高度的表单内容模态。模态内容通常比模态内容长，因此用户必须在模态容器内向下滚动才能查看和填写整个表单。

每个表格 <input>在 <input> 下方还有一个小工具提示。当它在焦点上时。为确保用户在通过 tab 键浏览表单或单击靠近模态中当前滚动位置底部的表单字段时对用户可见，我编写了一些 JavaScript/jQuery 以在出现以下情况时自动滚动内容:工具提示将隐藏在模态框的底部。

这是我的代码:

// The amount of padding an element should always have to the bottom
var padding = 50;

// Add focus event to the form elements
$(".modal-content input, .modal-content textarea").focus(function(){

    // Get element bottom position relative to modal bottom
    var elementBottom = $(this).offset().top + $(this).height();

    var modalPadding = parseInt($('.modal-content').css('padding'), 10);

    var modalBottom = $('.modal-content').offset().top + $('.modal-content').height() + modalPadding;

    var distanceFromBottom = modalBottom - elementBottom;

    // Get current scroll location
    var modalScroll = $('.modal-content').scrollTop();

    // Scroll the modal if the element's tooltip would appear outside visible area
    if (distanceFromBottom < padding){
        var amountToScroll = padding + modalScroll + -distanceFromBottom;
        $('.modal-content').animate({ scrollTop: amountToScroll },250);
    }

});

如果事情看起来有点困惑，请不要担心；这里的问题在第 8 行，我在那里使用 parseInt获取内容区域的 padding 的整数用于计算内容滚动量的值。

.modal-content填充值为 15px .如您所料，parseInt 返回 15然后我可以将其添加到我的 modalBottom 中的其他值中多变的。这在 Chrome、Safari 和 Internet Explorer 8 中完美运行。

但是，在 Firefox 中，此 parseInt 总是返回 NaN (非数字)出于某种原因。如果我更换 modalPadding在modalBottom变量 15 ，就像下面的代码一样，它也适用于 Firefox:

var modalBottom = $('.modal-content').offset().top + $('.modal-content').height() + 15;

显然，使用 modalPadding 的唯一原因变量是这样的，如果我们更改模态内容的填充，我们就不必更新 JS 代码，这是不太可能的。尽管如此，Firefox 返回 NaN 还是让我很恼火无论我如何尝试将填充值解析为整数。

首先我认为它与 parseInt 的基数值有关(对于基数 10 应该是 10)但是正如你所看到的那样我已经有了它但它仍然不起作用。

我也试过使用 parseFloat并使用 .replace('px','') 从值中删除“px”在尝试使用 parseInt 将该值设为整数之前，除了 NaN 之外，它们都没有返回任何内容。在 Firefox 中。

我正在运行 Firefox 27.0.1。任何人都可以向我解释为什么 Firefox 不解析我的填充吗？

Answer 1

Documentation说:

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

因此您需要指定 paddingLeft 或 paddingTop...等

在这个 live example 中可以看到, $.css 在 Firefox 中不返回任何内容。

如果所有方向(左、右、上、下)的内边距都是 15px，那么只需要一个:

var modalPadding = parseInt($('.modal-content').css('paddingLeft'), 10);