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

Question

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

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

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.无论值是什么都无关紧要,但只要两个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
    /* ... */
}