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

CSSフィルタを動的に適用するにはどうすればよいですか？私はChromeで次のことを試しました。そのクラスをCSSフィルタを動的に適用する

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

をトグル：

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

2013-02-13 Jacob

あなたがいないstyle対象に、webkitFilterプロパティに値を設定する必要があります。この構文will work：あなたはJavaScriptのプロパティ名がわからない場合は（karaxunaが提案のように、will work too）を

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

が、あなたはCSSプロパティで、それを参照することができます。

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

2013-02-13 09:04:00 Pavlo

どのように2つのフィルタを組み合わせるか？明るさと反転を言う？ –

@MaciejJankowskiはスペースで区切ります。明るさ（50％）invert（） "'：http://jsfiddle.net/bj4p0sxm/ – Pavlo

ありがとう！あなたは上司です！ –

クラスにそのフィルタを追加

image.classList.toggle('bright');

2013-02-13 08:47:01 Blender

@PavloMykhalov：http://codepen.io/malyw/pen/EDnmt
はまた、あなたがアクションでCSSハックを示す大規模なデモを見つけることができません。 – Blender

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

2013-02-13 08:48:21 karaxuna

1）ブラウザがCSSをサポートしているかどうかをチェック（必要な場合）-filtersは
2）「フィルタ」プロパティは、現在のブラウザでベンダーを必要とするかどうかを検出し、
3）を設定し、フィルタ値形式で保存：

そのため

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

または

el.style.vendorFilter = value;

チェック小さなデモ：まあ、どちらも `-webkit`プロパティです：http://malyw.github.io/css-filters/

2014-05-19 07:15:15

答えて