检查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属性？

回答

相关问题