javascript - 在 JS 中检查是否支持 CSS 属性？

Question

我想检查用户浏览器是否支持 CSS 属性 pointer-events ( see documentation )。

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

我想在 JavaScript 中运行检查并显示适当的 HTML 位，具体取决于它是否受支持。

有比检查用户代理字符串更好的方法吗？

Answer 1

对于非 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
}