JavaScriptを使って、linkタグで外部cssを読み込みたい

基本的なことで恐縮ですが、
なかなかうまくいかなかったので、質問させてください。

やりたいこと

外部CSSを読み込む<link>タグのパスを、動的に変化させたい

具体的なソースでいいますと、

<head>
    ・・・
    <link rel="stylesheet" href="../css/common.css" type="text/css" />
    <link rel="stylesheet" href="../css/jobs.css" type="text/css" />
    ・・・
</head>

↓

<head>
    ・・・
    <script type="text/javascript">
        var DIR = "http://sample.com/"; //←実際はここを変化させます 
        document.write('<link rel="stylesheet" src="' + DIR + 'css/common.css" type="text/css" />');
        document.write('<link rel="stylesheet" src="' + DIR + 'css/jobs.css" type="text/css" />');
    </script>
    ・・・
</head>

起きている問題 : CSSが適用されない

DeveloperTool で見る限り、エレメントはちゃんと出力されているんですが、
読み込みタイミングの問題か、CSSが全く適用されません。

JSは最後に読み込まれる印象があるので、無理なのかな・・と思ったりするのですが、
解決法をご存知の方いましたら、ご教示いただけますと助かりますm(__)m

行動規範の内容に同意します

回答2件

ベストアンサー

'<link rel="stylesheet" src="' + DIR + 'css/jobs.css" type="text/css" />'
となっていますが src= じゃなくて href= です

そこを直せば JavaScript で document.write する方法でも動くと思います

投稿2016/03/15 15:59

ryls-nmm

総合スコア633

ta__miyan

2016/03/16 00:33

動きました、、こんな凡ミスとはお恥ずかしい。ありがとうございました！

行動規範の内容に同意します

HTML
1
2<link id="style1" href="stylesheet1.css" rel="stylesheet" type="text/css" />
3<script sytpe="text/javascript>
4function changeCss(newCssFileName) {
5  document.getElementById('style1').href = newCssFileName;
6}
7</script>
8