14

有没有办法使用 JavaScript 检查CSS 功能calc是否可用？

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

4

4 回答 4

15

在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;
});
于 2013-01-02T16:24:14.390 回答
7

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

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

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

现在，如果浏览器不支持 calc()，则元素将返回 10 的宽度值。如果支持它，它将返回 20。值究竟是什么并不重要，但只要两个width 属性最终具有不同的值（在本例中为 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
    /* ... */
}
于 2014-01-22T23:09:43.093 回答
2

根据他们的新闻页面，Calc 检测被添加到 Modernizer 中。 http://modernizr.com/news/

除了加强对现有测试的支持外，我们还添加了许多新的检测，其中许多是由社区提交的：

[...]
css-calc
于 2013-01-02T16:23:43.080 回答
2 
var cssCheck = document.createElement("DIV");
cssCheck.style.marginLeft = "calc(1px)";
if (cssCheck.style.getPropertyValue("margin-left"))
{
    alert("calc is supported");
}
cssCheck = null;
于 2017-07-01T18:50:40.257 回答