如何使用 JavaScript 检查 CSS calc() 是否可用？答案

【问题标题】：How can I check if CSS calc() is available using JavaScript?如何使用 JavaScript 检查 CSS calc() 是否可用？
【发布时间】：2012-12-17 00:27:04
【问题描述】：

有没有办法使用 JavaScript 检查the CSS function calc 是否可用？

我发现了很多关于使用 jQuery 获得与 calc 相同行为的问题和文章，但我如何才能只检查它是否可用？

【问题讨论】：

标签： javascript css

【解决方案1】：

在Modernizr 中，您可以在非核心检测中找到css-calc 的测试。他们使用以下代码：

Modernizr.addTest('csscalc', function() {
    var prop = 'width:';
    var value = 'calc(10px);';
    var el = document.createElement('div');

    el.style.cssText = prop + Modernizr._prefixes.join(value + prop);

    return !!el.style.length;
});

【讨论】：

Modernizr._prefixes.join() 有什么作用？没有 Modernizr 的解决方案需要替换此功能。
@JoseGómez 这行测试会附加所有前缀（-webkit 等）以进行测试，如果有任何支持并且仅符合标准。因此，根据您的其余代码，您可以删除该行。

【解决方案2】：

聚会有点晚了，但我想我应该分享这个，因为我自己也在为此苦苦挣扎。想出了使用 jQuery 的想法，我可以创建一个 div，它使用 CSS 属性中的 calc() 值（例如本例中的宽度）以及一个备用宽度，以防浏览器不支持 calc()。现在检查它是否支持它，这就是我所做的：

让我们为当前“不存在”的 div 元素创建 CSS 样式。

/* CSS3 calc() fallback */
#css3-calc {
    width: 10px;
    width: calc(10px + 10px);
    display: none;
}

现在，如果浏览器不支持 calc()，则元素将返回 10 的宽度值。如果支持，它将返回 20。无论值是什么，只要因为这两个宽度属性最终具有不同的值（在本例中为 10 和 20）。

现在是实际脚本。这很简单，我想普通的 JavaScript 也可以，但这里是 jQuery 脚本：

// CSS3 calc() fallback (for unsupported browsers)
$('body').append('<div id="css3-calc"></div>');
if( $('#css3-calc').width() == 10) {
    // Put fallback code here!
}
$('#css3-calc').remove(); // Remove the test element

或者，原生 javascript 检查和宽度：

#css3-calc { width: 1px; width: calc(1px + 1px); }

if( document.getElementById('css3-calc').clientWidth==1 ){
    // clientHeight if you need height
    /* ... */
}

【讨论】：

我使用了这个技巧，但是我使用了宽度。这样我确定它不会弄乱我的页面（0px 高度）。
进行了编辑，添加了原生 JS 变体，我在其中使用了宽度。还删除了parseInt()，因为.width() 返回一个数字
这是一个有用的答案，但我认为本机 javascript 应该放在首位，因为人们（像我一样）在看到 jquery 的 $ 标志后就不再阅读了......另外， +1。检查的好方法。
加上display: none;，JS引擎的宽度不会是0吗？
1px + 1px 不需要，calc(2px) 仍然是一个计算。这导致我在下面找到更简单的解决方案......

【解决方案3】：

根据他们的新闻页面，将计算检测添加到现代化工具中。 http://modernizr.com/news/

除了加强对现有测试的支持外，我们还添加了一些新的检测，许多是由社区提交的：
[...]
css-calc

【讨论】：

【解决方案4】：

var cssCheck = document.createElement("DIV");
cssCheck.style.marginLeft = "calc(1px)";
if (cssCheck.style.getPropertyValue("margin-left"))
{
    alert("calc is supported");
}
cssCheck = null;

【讨论】：