js检测css的属性和属性值

1，检测属性

用js检测css的某个属性是否存在，classList取得的是所有的class列表,style取得的是元素所拥有的所有元素列表。

 let htmlDom=document.documentElement;
    function haveCssProperty(property){
        if(property in htmlDom.style ){
            htmlDom.classList.add(property.toLowerCase());
            return true;
        }else{
            htmlDom.classList.add("no"+property.toLowerCase());
            return false;
        }
    }

2，检测具体具体的属性值

原理，先给某个元素赋值，然后进行检测

 let htmlDom=document.documentElement;
    htmlDom.style.backgroundImage="linear-gradient(red,tan)";
   if(htmlDom.style.backgroundImage){
       htmlDom.classList.add("linererer");
    }else{
        htmlDom.classList.add("no-linererer")
    }

对此进行封装:

function havePropertyValue(id,property,value){
    var element=document.createElement('p');
    element.style[property]=value;
    if(element.style[property]){
        document.documentElement.classList.add(id);
        return true;
    }else{
        document.documentElement.classList.add("no"+id);
        return false;
    }
}

值得注意的是：浏览器可以解析某个css特性，不代表它已经实现或者是正确实现了这个特性