javascriptでwebkitのstyleを変更したい

javascriptでwebkitのCSSを変更したいです
具体的には-webkit-filter: grayscale(100%);なのですが
これはjavascriptに書くときはどうしたら良いのでしょうか？
javascriptは
bgc = new Array();
bgc[0] = "url(A.gif)";
bgc[1] = "url(B.gif)";
n = Math.floor(Math.random()*bgc.length);
document.body.style.webkitfilter = "grayscale(100%)";
document.body.style.filter = "grayscale(100%)";
document.body.style.backgroundImage = bgc[n]
これだと真っ白になって動かなくなっちゃいます。

質問者からの補足コメント

• document.body.style.-webkit-filter = "grayscale(100%)";
  document.body.style.filter = "grayscale(100%)";も真っ白です。

    補足日時：2019/07/03 20:53

• ちなみに普通にCSSで指定しても背景だけグレースケールになってくれないのですが、
  やはりjavascriptで動かしてるからでしょうか？

    補足日時：2019/07/03 20:54

• document.body.style.setProperty('-webkit-filter', 'grayscale(100%)');
  document.body.style.webkitfiltergrayscale = "100%";
  はグレーにならない
  element.style.setProperty('-webkit-filter', 'grayscale(100%)');
  element.style.webkitfiltergrayscale = "100%";
  element.style.webkitfilter = "grayscale(100%)";
  は白くなっちゃいます

    補足日時：2019/07/04 06:17

• img.style.webkitFilter = "grayscale(" + 100%+ ")";
  はグレスケになりませぇん

    補足日時：2019/07/04 06:34

• 普通に画像の方をグレーにすればいいんですけど
  分からないのもなんかシャクだなぁって思って・・・。

    補足日時：2019/07/04 06:40

• var target = document.getElementById("body");
  target.style.webkitFilter = "grayscale("100%")";
  も白くなりました。

    補足日時：2019/07/04 07:33

• あっ、意味が分かりました！
  <SCRIPT language="JavaScript">
  <!--
  Element.style.Filter = "grayscale(100%)";
  bgc = new Array();
  bgc[0] = "url(img.gif)";
  bgc[1] = "url(img.gif)";
  n = Math.floor(Math.random()*bgc.length);
  document.body.style.backgroundImage = bgc[n]
  //-->
  </SCRIPT>
  でやってみましたが相変わらず白いままで
  body {
  filter:grayscale(100%);
  }
  でやってみても背景だけグレーになりませんでした。

  No.2の回答に寄せられた補足コメントです。 補足日時：2019/07/06 08:10

No.4 回答者： fujillin 回答日時： 2019/07/06 18:43

No3です

書き忘れましたが、Chromeをご利用なら、F12キーでスクリプトのエラーや要素に実際に適用されているスタイルを確認することができます。
これらの機能を活用することで、素早く修正すべき点を見つけることができるようになるものと思います。

No.3 回答者： fujillin 回答日時： 2019/07/06 15:04

No2です

CSSでのスタイル設定とjavascriptによるスタイル設定は完全に等価です。
ですので、CSSならできるとか、javascriptならできるといったような差はありません。
唯一異なるのは、javascriptを利用した場合は、対象とする内容を動的に変化させることが可能だという点でしょうか。
勿論、仕様として設定されていない内容は、どちらを用いても実現することはできません。

また、CSS、javascriptとも記述法が定められていますので、それに則っていない記述は、無視されたり、実行全体が停止したりします。
将来的にはわかりませんが、好きに記述を並べれば忖度して解釈してくれるような機能は、現在のところありません。

適当に記述する前に、それぞれの記述ルールをきちんと調べてから記述する習慣をつけることをお奨めします。
https://developer.mozilla.org/ja/docs/Web/CSS/ba …
https://developer.mozilla.org/en-US/docs/Web/API …

No.2 回答者： fujillin 回答日時： 2019/07/05 10:24

No1です

Chrome 75.0でテストしてみましたが、問題なく動作するようです。
背景画像にも効くようですね。

＞style.WebkitFilter = "grayscale("100%")";で良いでしょうか？
ダブルクォーテーションの入れ子は文法的に解釈できません。（スクリプトの基本）
そもそも、"100%"をクォーテーションで括るってどこからきたのかなぁ？
　Element.style.WebkitFilter = "grayscale(100%)";
で試してみてください。

ってか、ChromeもSafariも既にfilterに対応していると思いますので、わざわざwebkitのプレフィックスに固執する必要性があるとも思えないのですが・・・？？
https://caniuse.com/#feat=css-filters

この回答へのお礼

<SCRIPT language="JavaScript">
<!--
Element.style.WebkitFilter = "grayscale(100%)";
bgc = new Array();
bgc[0] = "url(img.gif)";
bgc[1] = "url(img.gif)";
n = Math.floor(Math.random()*bgc.length);
document.body.style.backgroundImage = bgc[n]
//-->
でやってみましたがやはり白くなってしまいました・・・クロームです。
普通にCSSで指定すれば動くよってイミでしょうか？？
それだと何故か背景だけグレスケにならないんですよ～
BODYタグに入れてるからでしょうか？
body {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
よろしくお願いします！

お礼日時：2019/07/06 07:58

No.1 回答者： fujillin 回答日時： 2019/07/04 09:16

こんにちは

使ったことがないので、よくわかりませんが、普通に
　style.WebkitFilter
とかでできませんか？

もっとも、背景にも効くのかどうかは疑問ですが。

この回答へのお礼

style.WebkitFilter = "grayscale("100%")";で良いでしょうか？
背景が真っ白になってしまいます。

お礼日時：2019/07/04 19:07