如何使用JavaScript在浏览器中检查某些CSS功能？ [英] How to check a certain CSS capability in a browser using JavaScript?

问题描述

如何在浏览器中使用JavaScript检查某个CSS功能，而不检测其供应商，userAgent或appName？

How to check a certain CSS capability in a browser using JavaScript without detecting its vendor, userAgent, or appName?

推荐答案

在jQuery中创建cssHook时，我使用了类似的方法：

I've used something like this when creating a cssHook in jQuery:

测试CSS属性：

var div = document.createElement("div"),
    divStyle = div.style;

    $.support.boxSizing =
    divStyle.MozBoxSizing === ''? 'MozBoxSizing' : 
    (divStyle.WebkitBoxSizing === ''? 'WebkitBoxSizing' : 
    (divStyle.MsBoxSizing === ''? 'MsBoxSizing' :
    (divStyle.boxSizing === ''? 'boxSizing' : false)));

    div = divStyle = null; //release memory

测试CSS属性值： >

Testing for a CSS Property Value:

var div = document.createElement( "div" ),
    css = "background-image:gradient(linear,left top,right bottom, from(#9f9), to(white));background-image:-webkit-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-moz-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-o-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-ms-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-khtml-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:linear-gradient(left top,#9f9, white);background-image:-webkit-linear-gradient(left top,#9f9, white);background-image:-moz-linear-gradient(left top,#9f9, white);background-image:-o-linear-gradient(left top,#9f9, white);background-image:-ms-linear-gradient(left top,#9f9, white);background-image:-khtml-linear-gradient(left top,#9f9, white);";    

    div.style.cssText = css;

$.support.linearGradient =
    div.style.backgroundImage.indexOf( "-moz-linear-gradient" )  > -1 ? '-moz-linear-gradient' :
    (div.style.backgroundImage.indexOf( "-webkit-gradient" )  > -1 ? '-webkit-gradient' :
    (div.style.backgroundImage.indexOf( "gradient" )  > -1 ? 'gradient' : false));

    div= null; //release memory

这篇关于如何使用JavaScript在浏览器中检查某些CSS功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！