Question

我制作了一个简单的Javascript例程，报告浏览器中存在的所有样式属性。

var list = new Array();
var div = document.createElement('div');
for (var style in div.style) 
    list.push(style);

它有效。结果采用JavaScript格式，因此例如borderTopLeftRadius表示CSS属性border-top-left-radius，MozAnimationTimingFunction表示-moz-animation-timing-function，依此类推。

以下是a fiddle，您可以在其中看到它。

（顺便提一下，这个列表是有缺陷的。例如，在Firefox和IE中，列表甚至不包含float，但在Chrome中也是如此。火狐和IE都有cssFloat。哦，我可以忍受。）

到目前为止，非常好但是，我的目标是只有一个CSS属性名称列表。但结果还包括完全不属性的条目，例如getPropertyPriority和length。我的问题是，我该如何过滤掉这些？如何区分这些条目（一些是Javascript函数，一些是只读属性）和实际的CSS属性名称？

编辑：
我不介意仅适用于SVG的属性;保留它们是可以的。

此外，虽然可以通过检查属性是否像Mr_Green所指出的那样输入类型'string'来过滤掉大多数有问题的（参见updated fiddle），但列表中仍有一些条目不是CSS属性名称，例如cssText和marks（后者仅在某些浏览器中）。我想过滤掉那些，但还没有找到办法。

W3C提到了一个名为supports()的功能，但我无法做到这一点。有人能找到我的榜样吗？

Answer 1

我不知道您的目标是检查属性是否受支持，但

function isPropertySupported(property)
{
    return property in document.body.style;
}

可以检查属性是否受支持。我希望它有所帮助。如果我错了，请纠正我。

Check whether a CSS property is supported or not

修改

查看CSS Supports

supports(DOMString property, DOMString value), returns boolean supports(DOMString conditionText), returns boolean

当使用两个arguments属性和值调用supports()方法时，如果property是UA支持的CSS属性名称的文字匹配，则它必须返回true，并且值将成功解析为支持该属性的值。（文字匹配意味着不执行CSS转义处理，并且不会剥离前导和尾随空格，因此任何前导空格，尾随空格或等同于属性名称的CSS转义将导致该方法返回false。）否则，它必须返回false。

如何阅读浏览器支持的所有样式属性

1 个答案: