3

我正在尝试在 jQuery 中编写一个函数，该函数旨在支持不支持 CSS calc 属性的浏览器。

到目前为止，我有以下内容：

function calc($element, $xy, $logic, $difference) {
    var calc = $($object).$xy() $logic $difference;
    return calc;
}

if ($.browser.msie && $.browser.version <= 8) {
    var height = calc("body", "height", "-", "80");
    $("div#page").css("height", height);
}

这一次我可以在没有功能的情况下逃脱，但为了将来参考，我认为拥有这个功能会非常有用。

显然这一行：

var calc = $($object).$xy() $logic $difference;

...将会失败，但我不知道如何正确地将变量传递给它。

如果有人对语法有任何建议，或者我应该如何写这一行，那就太好了。

4

1 回答 1

7

你可以这样做：

function calc( selector, method, adjust ) {
    return $(selector)[method]() + adjust;
}

if( $.browser.msie  &&  $.browser.version <= 8 ) {
    var height = calc( 'body', 'height', -80 );
    $('div#page').css( 'height', height );
}

关于该代码的一些注释：

  • 您不需要$函数参数的前缀。如果您正在编写 jQuery 代码，我建议$仅在引用 jQuery 对象的变量上使用前缀，例如

    var $foo = $('#foo');  // cache jQuery object for later use

  • 请注意与 - 一起使用的方括号，[method]这就是您可以调用名称存储在变量中的方法的方式。

  • 我将数学运算和值组合成一个adjust参数。您可以做一些更奇特的事情，但最好能看到更多关于如何首先使用此代码的示例。

还有一个建议：如果您必须编写 JavaScript 来在不支持 CSS calc 的浏览器上进行大小调整，为什么不在所有浏览器中使用 JavaScript 代码？然后你只有一个代码/样式设置来调试而不是两个。

于 2013-03-26T09:00:57.780 回答