HTMLでJavaScriptを使用して色コードを管理する方法

2023/09/11 10:22

このQ&Aのポイント

JavaScriptを用いてHTMLの背景色を変更する方法を紹介する。
入力した色コードをHTMLの非表示フィールドに設定する方法についての疑問。
特定の要素の色を変更し、その値を<input>に保存する方法を探る。

spider32
お礼率69% (113/162)

JavaScript
回答数4
ありがとう数3

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

AsarKingChang
ベストアンサー率46% (3467/7474)

2023/09/11 13:55 回答No.2

>javascriptで受け取った色コードをinput のvalue値に反映させるという意味になります。これのサンプル <html> <head> <script> window.onload = function() { let target=document.getElementById("target"); console.log("書き換え前=" + target.value); target.value="#123456"; console.log("書き換え後=" + target.value); } </script> </head> <body> <input type="hidden" name="color" value="XXXX" id="target"> </body> </html> ただ、INPUTは、通常FORMで使うので、 hiddenしなくても、FORMに追加ノードを作る方が効率は良いのですが、一応文字として追加するサンプルを張っておきます。

質問者

お礼 2023/09/11 15:39

ご丁寧に回答いただき有難うございました。target.valueにjavascriptで代入して、<input type="hidden" id="target" ...>としたら無事にセットされました。

その他の回答 (3)

AsarKingChang
ベストアンサー率46% (3467/7474)

2023/09/11 14:01 回答No.4

console.log("書き換え前=" + target.value); ↑この部分の出力は、ブラウザデバッガー画面側に出ますので、そこで確認を Chromeなら「F12」でデバッガー画面が出せます。そこで、Console（日本語化してる場合はコンソール）にて、出力が確認できます。また、書き変わったエレメントは Elementsで実際に確認できますので！

AsarKingChang
ベストアンサー率46% (3467/7474)

2023/09/11 13:58 回答No.3

>色を選択することでjavascriptでtableの背景色を変更し、その色コードを別ファイル.txtに書き込んで保存これは、できません。 JavaScriptは別の層で動いており、ローカルファイルへの入出力はそもそもできないのです。ただし、インポートとして、JSプログラムとして取り込む事だけは許される。しかし、書き出し先は存在しないので、こっちは無理！やれるのはブラウザそのものにセーブすることは可能。クッキーを使う事で、ブラウザに保存することはできます。それを、ダウンロードフォームで外の世界にエクスポートするのが、ベターでしょう。なお！好き勝手にローカルファイルにアタッチ出来たら、悪意のあるコンテンツが貴方のパソコンを好き勝手に書き換えちゃうので、これは、できない方が望ましいのですよ。

AsarKingChang
ベストアンサー率46% (3467/7474)

2023/09/11 10:57 回答No.1

「の中に」の意味が解りません。 <input type="hidden" name="color" value="XXXX"> の中は、HTMLなので、JavaScriptを入れても意味がないのと、 JavaScriptは、起動時にあった物しか実行しないので、後から書き換えてJavaScriptを追加してもそれは実行されませんよ。それでもいいなら、 <div id=waaa> <input type="hidden" name="color" value="XXXX"> </div> と親空間を作り、waaaのインナーつまり、inputタグを innerHTMLで作り出せばOKです。ただ、色を変えるのが目的なら、classやidでCSSを指定しておいてそれを追加する方がいい結果かとは思います。または、最初にCSSセレクタとしてではなくJSのセレクタとして（記載の条件は同じ）配置してそれのダイレクトCSSを追加してあげるか？ただ、どっちにしても、JavaScriptを追加するわけではないので、やっぱり「javascript文字をhtmlにセットする」これが何なのか？を先に解決したいとはこちらでは思ってますので、変更前と、変更後の違いを補足などで書いてもらえますか？

質問者