《CSS揭秘》 |检测属性与属性值

检查属性是否存在

var root = document.documentElement;
if ('textShadow' in root.style) {
    root.classList.add('textshadow');
}else {
    root.classList.add('no-textshadow');
}

若有多个属性，可写成构造函数：

function testProperty(property) {
    var root = document.documentElement;
    if (property in root.style) {
        root.classList.add(property.toLowerCase());
        return true;
    }else{
        root.classList.add('no-' + property.toLowerCase());
        return false; 
    }
}

检测某个具体的属性值是否支持

先赋值给对应的属性，然后再检查浏览器是不是还保存着这个值：

var dummy = document.createElement('p'); 
dummy.style.backgroundImage = 'linear-gradient(red,tan)';
if (dummy.style.backgroundImage) {
    root.classList.add('lineargradients');
} 
else {
    root.classList.add('no-lineargradients');
}

构造函数：

//样式名称 属性 属性值
function testValue(id, value, property) { 
    var dummy = document.createElement('p'); 
    dummy.style[property] = value;
    if (dummy.style[property]) { 
        root.classList.add(id);
        return true;
    }else{
        root.classList.add('no-' + id);
        return false; 
    }
}