CSS calc的jQuery回退函数

Question

我正在尝试在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;

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

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

Answer 1

你可以这样做:

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代码呢？然后你只有一个代码/样式设置来调试而不是两个.