檢查JS是否支持CSS屬性？

我想檢查用戶的瀏覽器是否支持CSS屬性pointer-events（see documentation）。檢查JS是否支持CSS屬性？

目前，例如，它不受Opera支持，我相信一些版本的IE。

我想在JavaScript中運行檢查並顯示適當的HTML位，具體取決於它是否受支持。

有沒有比檢查用戶代理字符串更好的方法嗎？

來源

2011-08-31 Richard

通常你會檢查用戶代理是什麼，並從中知道什麼是或不支持。 – Endophage

@Endophage：通常情況下，你不這樣做。 [功能檢測]（http://api.jquery.com/jQuery.support/）是優越的方法。儘管在「指針事件」的情況下，沒有可靠的測試。 – thirtydot

@thirtydot特徵檢測是好的，如果只有你想做的一些有趣的事情。如果您有很多功能需要檢測，請在Modernizer中說出所有內容，但效率不高。 – Endophage

我覺得

if ("pointer-events" in document.body.style)

或

if ("pointerEvents" in document.body.style)

應在SVG內容的情況下足夠了。

來源

2011-08-31 21:29:17 Knu

這[[評估爲真實]（http://jsfiddle.net/M27PT/）[不按預期工作]）（http://jsfiddle.net/7TvVY/10/）在IE9中。 – Artyom

@art可能是因爲[IE9沒有將此SVG屬性]（http://msdn.microsoft.com/en-us/library/ff972269（v = vs.85）.aspx）擴展爲HTML內容。 – Knu

看起來這是Firefox中的另一種方式：您的語句返回false，但CSS按預期工作。 – Artyom

下面的計算結果爲true在IE 9和Firefox：

if ('pointerEvents' in document.documentElement.style)

來源

2011-08-31 21:32:55 clarkb86

而在Opera中，它絕對不支持它作爲一個HTML屬性，所以我擔心這是行不通的。 – Richard

這不是一個答案，但這是真的 – taseenb

非SVG內容，此腳本應該工作：
https://github.com/ausi/Feature-detection-technique-for-pointer-events

您也可以使用它沒有的Modernizr：

var pointerEventsSupported = (function(){ 
    var element = document.createElement('x'), 
     documentElement = document.documentElement, 
     getComputedStyle = window.getComputedStyle, 
     supports; 
    if(!('pointerEvents' in element.style)){ 
     return false; 
    } 
    element.style.pointerEvents = 'auto'; 
    element.style.pointerEvents = 'x'; 
    documentElement.appendChild(element); 
    supports = getComputedStyle && 
     getComputedStyle(element, '').pointerEvents === 'auto'; 
    documentElement.removeChild(element); 
    return !!supports; 
})(); 
if(pointerEventsSupported){ 
    // do something 
}

來源

2012-01-17 16:50:24 ausi

太棒了！感謝張貼這！ –

@SerjSagan它現在也包含在Modernizr非核心檢測中。如果您想使用Modernizr，您可以訪問http://modernizr.com/download/並在非核心檢測中激活css-pointerevents。 – ausi

檢查JS是否支持CSS屬性？

回答

相關問題