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

有沒有辦法檢查使用JavaScript是否可以使用the CSS function calc？如何使用JavaScript檢查CSS calc（）是否可用？

我發現很多關於使用jQuery獲取與calc相同的行爲的問題和文章，但是我怎麼才能檢查它是否可用？

2013-01-02 jviotti

在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-02 16:24:14 Sirko

Modernizr._prefixes.join（）做了什麼？沒有Modernizr的解決方案需要替換此功能。 –

@JoseGómez這行代碼測試附加了所有前綴（'-webkit'等）來測試，如果有任何支持並且只是標準符合的話。因此，根據您的其他代碼，您可以放棄該行。 – Sirko

根據他們的新聞頁面，計算機檢測被添加到modernizer中。 http://modernizr.com/news/

除了收緊支持現有的測試，我們還增加了一些新的檢測，很多提交社區：
[...] 
css-calc 

來源

2013-01-02 16:23:43 jantimon

晚了一點晚會，但我想我應該分享這個，因爲我是我自己掙扎着。通過使用jQuery的想法，我可以創建一個使用CSS屬性中的calc（）值（如本例中爲width）的div，以及在瀏覽器不支持calc（）的情況下使用後備寬度。現在檢查它是否支持它，這就是我所做的：

讓我們爲當前「不存在的」div元素創建CSS樣式。現在

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

，如果瀏覽器不支持計算（），元素將返回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 
    /* ... */ 
}

來源

2014-01-22 23:09:43

我使用了這個技巧，但我使用了寬度。這樣我確信它不會弄亂我的頁面（0px高度）。 – Martijn

做了一個編輯，添加了我使用寬度的原生JS變體。也刪除'parseInt（）'，因爲'.width（）'返回一個數字 – Martijn

這是一個有用的答案，但我認爲原生JavaScript應該是第一位的，因爲人們（像我一樣）在看到jquery的'''符號...也是+1。很好的方法來檢查。 –

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

來源

2017-07-01 18:50:40

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

回答

相關問題