javascript - CSSフィルターを動的に適用する

Question

CSSフィルターを動的に適用する方法は？Chromeで次のことを試しました。

image.style = "-webkit-filter: brightness(50%);";

Answer 1

webkitFilterオブジェクトではなく、プロパティに値を設定する必要がありstyleます。この構文は機能します:

image.style.webkitFilter = "brightness(50%)";

JavaScript プロパティ名がわからない場合は、CSS プロパティで参照できます (karaxuna が提案したように、これも機能します)。

image.style["-webkit-filter"] = "brightness(50%)";

Answer 2

image.style["-webkit-filter"] = "brightness(50%)";

Answer 3

そのフィルターをクラスに追加します。

.bright {
    -webkit-filter: brightness(50%);
}

そしてそのクラスを切り替えます：

image.classList.toggle('bright');

Answer 4

1) ブラウザーが css-filters をサポートしているかどうかを確認します (必要な場合)
2) 現在のブラウザーで「フィルター」プロパティにベンダーが必要かどうかを検出し、保存します
3) フィルター値を次の形式で設定します:

el.style["-vendor-filter"] = value;

また

el.style.vendorFilter = value;

小さなデモを確認してください: http://codepen.io/malyw/pen/EDnmt
また、動作中の css フィルターを示す大きなデモを見つけることができます: http://malyw.github.io/css-filters/