如何讀取瀏覽器支持的所有樣式屬性

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等。

這是一個小提琴 ，您可以在那里實時看到它。

（順便說一下，該列表有缺陷。例如，在Firefox和IE中，該列表甚至不包含float ，但在Chrome中卻包含cssFloat和IE具有cssFloat 。哦，我可以接受。）

到現在為止還挺好。
但是，我的目標是只列出CSS屬性名稱。 但是結果還包括根本不是屬性名稱的條目，例如getPropertyPriority和length 。 我的問題是，如何過濾掉這些？ 如何區分這些條目（有些是Javascript函數，有些是只讀屬性）和實際的CSS屬性名？

編輯：
我不在乎僅適用於SVG的屬性； 可以保留這些。

另外，雖然可以通過檢查屬性是否具有Mr_Green所指出的類型為“字符串”的方式來過濾掉大多數有問題的屬性（請參閱更新的小提琴 ），但列表中仍有一些條目不是CSS屬性名，例如cssText和marks （僅在某些瀏覽器中為后者）。 我也想過濾掉這些，但是還沒有找到一種方法。

W3C提到了一個名為supports()的函數，但我無法使其工作。 有人可以找我一個例子嗎？

Answer 1

我不知道您的目標是否是檢查某個屬性是否受支持，但是

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

可以檢查是否支持某個屬性。 希望對您有所幫助。 如果我錯了，請糾正我。

檢查是否支持CSS屬性

編輯：

查看此CSS支持

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

當使用兩個參數property和value調用supports()方法時，如果屬性與UA支持的CSS屬性名稱在字面上匹配，則必須返回true，並且value將被成功解析為該屬性的支持值。 （字面匹配表示不執行CSS轉義處理，並且不刪除開頭和結尾的空格，因此，與屬性名稱等效的任何開頭的空格，結尾的空格或CSS開頭都將導致該方法返回false。）否則，它必須返回false。