Question

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

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

Answer 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;
});

Answer 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
    /* ... */
}

Answer 3

根据他们的新闻页面将calc检测添加到现代化器中。 http://modernizr.com/news/

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

Answer 4

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

如何使用JavaScript检查CSS calc（）是否可用？

4 个答案: