<meta name="theme-color" content="">をjQueryですぐに変更できますか。

Question

いつもお世話になっております。

Chrome for Androidのヘッダーを、Cookieを用いてサイトの色に合わせて変更しています。
設定は以下の通りです。

<meta name="theme-color" content="<?php echo htmlspecialchars($_COOKIE['color']);?>">

$("#color li.black").click(function(){
$.cookie("color","#000");
})

サイトを更新すれば問題なく適用させることができるのですが、
サイトを更新することなく、jQueryを用いて上記のmetaデータを変更することは可能でしょうか。

どなたかお答えいただけますと嬉しいです。

Answer 1

DB登録してPHPから取得して書き換えてください。

Comments

[退会済みユーザー]

DB登録という言葉を初め耳にしました。
調べながら解決方法を探していきます。

[m.ts10806]

「データベースに情報を格納して」と表現したほうが良かったですね。失礼しました。
もし「見ている人によって変えたい」のであればそのデータベースの保管の仕方、要は設計も変わってきますが。
COOKIEだと端末毎なので別の人が見たら元のままです。他のブラウザで確認すると分かりやすいです。

[m.ts10806]

あ、でもWordPressか。
WordPress管理下にないデータとの同居は簡単ではなさそうですね。
まあがんばってください。

[退会済みユーザー]

理屈はなんとなく理解することができましたが、少し難しい気がしてきました（笑）。とりあえず現在のままでも動くので、なにか適切な方法が浮かんだら試してみて、期待通りに動いたらまたこちらに記載したいと思います。。ありがとうございました！

[m.ts10806]

「見てる自分だけ」なのか「他の人も同じように」なのかで違います。
後者であればJavaScriptからは不可能です。
「すぐ実行」したとしても結局htmlが全て読み込まれあとに動作させることになるので一瞬のちらつきが出る可能性もあります。
Cookie使うにしても全てphpで切り替えるのが無難でしょう。

Answer 2

$("#color li.black").click(function(){
  $('head meta[name="theme-color"]').attr('content',"#000");
  $.cookie("color","#000");
});

でいけるかな？
headの要素をjsで上書きなんてお行儀悪いけどね

まあダメなら、更新もセットで

$("#color li.black").click(function(){
  $.cookie("color","#000");
  location.reload();
});

Comments

[退会済みユーザー]

すごい…更新せずに出来てしまいました（笑）。こんな指定方法があるんですね。とても参考になりました…ありがとうございます！！