html - 元素支持 CSS 属性

Question

基本上，我需要在 Chrome 浏览器中找出所有支持 CSS 属性“background-color”和“color”的 HTML 元素。理想情况下，所有与颜色相关的 CSS 属性在级联和计算时都会有所不同。我尝试使用 CSS.supports方法，但它的行为很奇怪。任何帮助将不胜感激。

Answer 1

所有 HTML 元素都支持这些 CSS 属性:

var styleProperties = [
    'color',
    'backgroundColor'
];
var stylePropertiesLength = styleProperties.length;
var windowPropertyNames = Object.getOwnPropertyNames(window);
for (var i in windowPropertyNames) {
    if (windowPropertyNames.hasOwnProperty(i)) {
        var windowPropertyName = windowPropertyNames[i];        
        if (windowPropertyName.indexOf('HTML') === 0) {                             
            var documentElement = document.createElement(windowPropertyName);           
            for (var j = 0; j < stylePropertiesLength; j++) {
                var styleProperty = styleProperties[j];
                var isSupported = (styleProperty in documentElement.style);
                console.log(windowPropertyName + '.style.' + styleProperty + ' = ' + isSupported);  
            }                       
            console.log('');
        }
    }
}