2

ブラウザーに存在するすべてのスタイル プロパティを報告する単純な Javascript ルーチンを作成しました。

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

そして、それは機能します。結果は JavaScript 形式であるため、たとえばborderTopLeftRadiusCSS プロパティborder-top-left-radius、MozAnimationTimingFunction手段-moz-animation-timing-functionなどを意味します。

これは、ライブで見ることができるフィドルです。

(ちなみに、リストには欠陥があります。たとえば、Firefox と IE では、リストには が含まれていませんfloatが、Chrome では含まれています。Firefox と IE には がありcssFloatます。まあ、私はそれで問題ありません。)

ここまでは順調ですね。
ただし、私の目標は、CSS プロパティ名のリストのみを取得することです。getPropertyPriorityただし、結果には、やなど、プロパティ名ではないエントリも含まれますlength。私の質問は、どうすればこれらを除外できますか? これらのエントリ (一部は Javascript 関数、一部は読み取り専用プロパティ) と実際の CSS プロパティ名を区別する方法は?

編集:
SVG のみに適用されるプロパティについては気にしません。それらを保持しても問題ありません。

また、問題のあるもののほとんどは、Mr_Green が指摘したように、プロパティのタイプが「文字列」であるかどうかを確認することで除外できますが (更新された fiddleを参照)、リストには CSS プロパティ名ではないエントリがまだいくつかありますcssText。marks(後者は一部のブラウザのみ)。それらも除外したいのですが、そうする方法が見つかりません。

W3C は呼び出された関数について言及していますsupports()が、私はそれを機能させることができませんでした。誰かが私の例を見つけることができますか?

4

1 に答える 1

0

プロパティがサポートされているかどうかを確認することが目的かどうかはわかりませんが、

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

プロパティがサポートされているかどうかを確認できます。お役に立てば幸いです。私が間違っている場合は修正してください。

CSS プロパティがサポートされているかどうかを確認する

編集：

これをチェックしてくださいCSS サポート

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

プロパティと値の 2 つの引数を指定してメソッドが呼び出された場合、プロパティが UA がサポートする CSS プロパティの名前とリテラル一致する場合、supports()メソッドは true を返す必要があり、値はそのプロパティでサポートされている値として正常に解析されます。(リテラル一致とは、CSS エスケープ処理が実行されず、先頭と末尾の空白が削除されないことを意味します。そのため、先頭の空白、末尾の空白、またはプロパティの名前と同等の CSS エスケープにより、メソッドは false を返します。) false を返す必要があります。

于 2013-08-27T07:56:43.117 に答える