質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

193閲覧

別のHTMLの読み込むCSSを動的に書き換える方法

somatech0428

総合スコア37

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/07/09 05:48

すみません。

JSかなにかで、formで取得した情報通りに(緑のアイコンを押したらすべてのページが緑色に)
別のHTMLが読み込んでいるcssを書き変えることは可能でしょうか。
やはりPHPを使う必要がありますでしょうか。

http://illbenet.jp/view/51
クッキーを使ってやる方法もあるらしいですが・・・

なにか簡単ですぐに実装できそうな方法はありますでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/07/09 05:53

このままでは丸投げ質問(非推奨質問の代表格です)となってしまうので、自身が調べていく中でやってみたコードをご提示ください。その上で「何が」「どう」分からなかったのか記載してください。 https://teratail.com/help/question-tips
m.ts10806

2018/07/09 06:08

「書き換えた情報を保持しておく必要があるか」で作りも変わってくるので、要件・前提・背景を充実させてください。
guest

回答1

0

ベストアンサー

PHPやデータベースを使用したくなく、JSなどフロント側で全てのページに反映させたいのであればcookie以外にローカルストレージに保存という手がありますが、もっとも簡単なのはcookieかなと個人的に思います。
簡単な実装例を置いていきますね。|ー゚)

【ファイル1】

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"/> 5 <script type="text/javascript"> 6 function goPage(){ 7 const color_radio_elems = document.getElementsByName("cl"); 8 let select_color; 9 for(let i = 0; i < color_radio_elems.length; i++){ 10 if(color_radio_elems[i].checked){ 11 select_color = color_radio_elems[i].value; 12 } 13 } 14 const sec = 600;//10分生存 15 /*cookieを保存 path=/;がミソ*/ 16 document.cookie = "color=" + select_color + ";max-age=" + sec + ";path=/;"; 17 location.href = "/hoge/hoge/index.html";//実際ファイル2へのパスへ変更して下さい 18 } 19 </script> 20 </head> 21 <body> 22 <h1>色を選んで下さい</h1> 23 <input type="radio" name="cl" value="red">あか 24 <input type="radio" name="cl" value="green">みどり 25 <input type="radio" name="cl" value="blue">あお 26 <button onclick="goPage()">移動</button> 27 </body> 28</html>

【ファイル2】

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"/> 5 <script type="text/javascript"> 6 function getColor(){ 7 /*cookieの読み込み*/ 8 const stpos = document.cookie.indexOf("color=") + 6;//color=の文字数分プラス 9 let edpos = document.cookie.indexOf(";", stpos); 10 if(edpos == -1) edpos = document.cookie.length; 11 return unescape(document.cookie.substring(stpos,edpos)); 12 } 13 window.addEventListener("load", function(){ 14 const color = getColor(); 15 const h1_elem = document.getElementById("h1-elem"); 16 h1_elem.style.color = color; 17 }); 18 </script> 19 </head> 20 <body> 21 <h1 id="h1-elem">設定された色で表示しています。</h1> 22 </body> 23</html>

投稿2018/07/14 11:57

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

somatech0428

2018/07/14 12:05

ありがとうございます!! 参考させていただきます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問