![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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]
これだと真っ白になって動かなくなっちゃいます。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
No3です
書き忘れましたが、Chromeをご利用なら、F12キーでスクリプトのエラーや要素に実際に適用されているスタイルを確認することができます。
これらの機能を活用することで、素早く修正すべき点を見つけることができるようになるものと思います。
No.3
- 回答日時:
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
- 回答日時:
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%);
}
よろしくお願いします!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS スマホ表示用のwebページ、style.cssでは表の中の文字 font-size は指定できない? 1 2023/03/27 18:57
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptからサーバサイドの...
-
HTML上(javascript)からCGIを...
-
コメント削除/圧縮/難読化
-
グローバル変数とローカル変数...
-
JavaScriptで、実行するたび値...
-
javascriptでエクセルデータ読...
-
htmlのfileタグに自動で値を入...
-
表示ページによって、aタグ内の...
-
既存のwebサイトで、ローカルの...
-
ブラウザからエクセルを開く方法
-
PowerPointで時計表示
-
contenteditableで編集した内容...
-
alert()が実行できない
-
「終了していない文字列型の定...
-
ページを一回だけリロードさせ...
-
Webページ中の javascript をVB...
-
javascriptでフォルダ内のファ...
-
エクセルVBA/ Formatで文字列が...
-
1つのVBAコードをすべてのコア...
-
IE6だけエラーになる???『:...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
VBScript から JavaScript を呼...
-
javascript で外部サイトにデー...
-
javascriptからサーバサイドの...
-
HTML上(javascript)からCGIを...
-
ホームページの更新年月日が知...
-
エクセルで作製した計算式の入...
-
グーグルマップhtmlタグの...
-
javascriptとDOM
-
JavaScriptを使って図を描きたい
-
jQueryの.val()とinnerHTMLの違...
-
javascriptでwebkitのstyleを変...
-
ホームページ初心者です。
-
このJavaScriptのどこが間違っ...
-
Javascriptの関数が見つからな...
-
画面を閉じたら、画面が出てく...
-
JSPの処理の途中で、JavaScript...
-
VB.NET2003 テキストボックスに...
-
JavaScriptで ブラウザの閉じる...
-
「終了していない文字列型の定...
-
gas 全角数字を半角数字に変換
おすすめ情報
document.body.style.-webkit-filter = "grayscale(100%)";
document.body.style.filter = "grayscale(100%)";も真っ白です。
ちなみに普通にCSSで指定しても背景だけグレースケールになってくれないのですが、
やはりjavascriptで動かしてるからでしょうか?
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%)";
は白くなっちゃいます
img.style.webkitFilter = "grayscale(" + 100%+ ")";
はグレスケになりませぇん
普通に画像の方をグレーにすればいいんですけど
分からないのもなんかシャクだなぁって思って・・・。
var target = document.getElementById("body");
target.style.webkitFilter = "grayscale("100%")";
も白くなりました。
あっ、意味が分かりました!
<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%);
}
でやってみても背景だけグレーになりませんでした。