アプリ版：「スタンプのみでお礼する」機能のリリースについて

詳しい人求む！

【JavaScript】特定の条件で特定のcssファイルを読み込ませたい

解決済

  • 質問者：shiro_46_san
  • 質問日時：
  • 回答数：4件

JavaScriptについての質問です。

特定の条件で特定のcssファイルを読み込ませたいのですが、どんな風に記述すればよいでしょうか？

具体的には、htmlのkeywordsタグに設定したキーワードのうち、特定のキーワードがあった時に特定のcssを読み込ませたいです。

たとえば、あるふたつのページのキーワードがそれぞれ下記のとき、
①<meta name="keywords" content="kore,sore" />
②<meta name="keywords" content="sore,are" />

外部css
<link rel="stylesheet" href="/kono.css" />

キーワードに「kore」があるときだけ「kono.css」を読み込むよう<link rel="stylesheet" href="/kono.css" />をhead内に書き加えるようにしたいです。
なので、①の場合は読み込まれ、②の場合は読み込まれないという要領です。


html、cssは多少分かりますが、JavaScriptの知識が乏しいのでこんなことができるのかどうかも分かりませんが、詳しい方にご教示いただければ幸いです。


平行していろいろ調べ下記のような感じで書いてみました。

var metaDiscre = document.head.children;// ヘッダのメタ情報
var metaLength = metaDiscre.length; // メタ情報の配列数を取得
for(var i = 0;i < metaLength;i++){ // 繰り返し処理
　　var proper = metaDiscre[i].getAttribute('name'); // メタ情報のneme属性を取得
　　if(proper === 'keywords'){ // neme属性がkeywordsだったとき
　　　　var dis = metaDiscre[i].getAttribute('content'); // keywords属性のcontent内容を取得
　　　　if (dis.indexOf('kore') !== -1) { // content内容にkoreが含まれるとき
　　　　　　// kono.cssをヘッダに書き出す
　　　　　　var d = document;
　　　　　　var link = d.createElement('link');
　　　　　　link.href = '/kono.css';
　　　　　　link.rel = 'stylesheet';
　　　　　　link.type = 'text/css';
　　　　　　var h = d.getElementsByTagName('head')[0];
　　　　　　h.appendChild(link);
　　　　}
　　}
}

jsファイルとして保存し、htmlのbody直下にscriptタグでファイル読み込ませましたが指定文字を含むページでも「kono.css」のlinkタグが書き出されずうまく動きません。
やりたいことは伝わるかと思いますが、具体的にどこが間違っているかご教示くださいませ。

素人なので文法の違いやセミコロン等の文字不足など、初歩的な部分も含めて検証していただけると嬉しいです。

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

  • つらい・・・

    いろいろ調べながら試しているのですが、スクリプトが動いてもhtmlのソース自体が書き換わるわけではないということでしょうか？

    簡単にhtmlとcssを作って実験してみましたが、コンソールで見ると

    { href: 'kono.css', rel: 'stylesheet', type: 'text/css'}.entries (([a, b]) => link[a] = b);

    上記の行で「Uncaught SyntaxError: Unexpected token :」と出ており、スクリプトで読み込ませるcssは効いてない状態です。
    なにか試してみることはあるでしょうか？

    急ぎませんので、お手すきの際に検証していただければ幸いです。

    No.3の回答に寄せられた補足コメントです。 補足日時：2019/01/27 20:36
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



内容は同じですが、多少旧め（？）のブラウザでも動く感じに焼き直してみました。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<meta name="keywords" content="kore,sore" />
<meta name="keywords" content="sore,are" />

<script type="text/javascript">
{
let meta, m, i, f = false;
meta = document.querySelectorAll('head meta[name="keywords"');
for(i=0; m=meta[i++];){ if(/kore/.test(m.content)) f = true; };

if(f){
let html = '<link rel="stylesheet" href="/kono.css" type="text/css" />';
document.querySelector('head').insertAdjacentHTML('beforeend', html);
}
}
</script>

</head>
<body>
<p>テスト用文章</p>
</body>
</html>

※ 言葉使いの問題かもしれませんが・・・
>スクリプトが動いてもhtmlのソース自体が書き換わるわけではない
>ということでしょうか？
ソース（＝htmlファイルの内容）が変わることはありません。
（ブラウザの「ソースを表示」で表示しても何も変わりません）
読み込み後に、ブラウザが解釈し、表示用に保持している内容（DOM）を書き換えています。
    • good
    • 0
    • 件
通報する
この回答へのお礼

あ、あなたが神か…(´；ω；｀)ﾌﾞﾜｯ

いただいた修正版のコードで見事に動きました!!
感謝の言葉しかありません。

まったく知識のない私には呪文のようにしか見えず、なにがどう変わったのか分かりませんが、とにかく目的を達成することができて感激です。

お忙しいなかお時間割いていただき誠にありがとうございます。

通報する
お礼日時：2019/01/28 11:02

No.3

火狐と、ちょろめのローカル環境で動かしました。


追加されました。単純に link.href = '/kono.css';　のパスがおかしいだけ？

let head = document.querySelectorAll ('head meta[name="keywords"]');
let target = [...head].filter (h => /kore/.test (h.content));

if (target.length) {
　 let link = document.createElement ('link');
　 { href: 'kono.css', rel: 'stylesheet', type: 'text/css'}.entries (([a, b]) => link[a] = b);
　 document.head.appendChild (link);
}
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速の検証ありがとうございます。
試してみましたがlinkタグが書きこまれません。(´；д；｀)
JavaScriptはまったく知識がないので、そもそもやり方が間違っているかもしれませんが、下記のようなページをつくればlinkタグが書き加えられるということでしょうか？
これをブラウザで開いてソースを見てもlinkタグは書き加えられていませんでした。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="keywords" content="kore" />
<link rel="stylesheet" href="/css/kizon.css" type="text/css" media="all" />
<title>Document</title>
</head>

<body>

</body>
<script type="text/javascript">
let head = document.querySelectorAll('head meta[name="keywords"]');
let target = [...head].filter(h => /kore/.test(h.content));

if (target.length) {
let link = document.createElement('link'); {
href: 'kono.css',
rel: 'stylesheet',
type: 'text/css'
}.entries(([a, b]) => link[a] = b);
document.head.appendChild(link);
}
</script>

</html>

通報する
お礼日時：2019/01/27 12:12

No.2

#1です。

馬鹿な回答をしてしまった。わすれて
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
何が合っていて何が間違っているかを知りたいので、検証していただけること自体がありがたいです。

上記コードでは、条件を満たしているページでもhead内に<link href～>が書き出されません。
デベロッパーツールのコンソールに打ち込むとundefinedと出ます。
やりたいことに対していい線までいっているとは思うのですが、何かが違うから書き出されないんだと…。
ぜひ、詳しい方にお力添えいただきたいです。

通報する
お礼日時：2019/01/27 09:52

No.1

if (dis.indexOf('kore') !== -1) { // content内容にkoreが含まれないとき

    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報