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

CSS calc的jQuery回退函数

1 个答案: