• 締切済み

JavaScriptで、参照する階層を変えるとCSSが読み込めない

 ランダムに1.cssまたは2.cssというcssファイルを読み込むスクリプトを記述しています。 <script language="javascript"> <!-- var cssno = Math.floor(Math.random() * 2 + 1); document.write("<link rel='stylesheet' type='text/css' href='"+cssno+".css'>"); //--> </script>  これでうまく動いたので、このスクリプトを含むHTMLファイルがある階層に「css」というフォルダを作り、その中にcssファイルを移しました。そこで、 <script language="javascript"> <!-- var cssno = Math.floor(Math.random() * 2 + 1); document.write("<link rel='stylesheet' type='text/css' href='css/"+cssno+".css'>"); //--> </script> というふうに、変数cssnoの前に階層を表す「css/」をつけたのですが、これをやったとたんに動かなくなりました。  ファイルを同じ階層に移動させて、「css/」を取れば(=元の状態に戻せば)動きます。参照する階層を間違えているのかと思って、<head></head>内に通常通り<link rel~>でCSSを指定したら読み込めました。  スクリプトの記述方法がいけないんでしょうか? どうすれば、フォルダ「css」からcssファイルを読み込めるようになりますか?

  • rusya
  • お礼率56% (167/295)

みんなの回答

  • NYOI
  • ベストアンサー率58% (56/96)
回答No.2

<script language="javascript"> <!-- var cssno = Math.floor(Math.random() * 2 + 1); document.write("<link rel='stylesheet' type='text/css' href='./css/"+cssno+".css'>"); //--> </script> ではどうですか?

rusya
質問者

お礼

 回答ありがとうございます。  やっぱりダメでした・・・・・・。<link rel~>で問題のcssと同じフォルダにある別のcssを読み込んでいるのですが、そちらはきちんと反映されているので、相対パスが間違っているわけではないようなのですが・・・・・・。問題のcssも<link rel~>で指定すれば反映されるので、もう本当に何がいけないのか分からないです。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

特に問題なそうなので、スペルミスの類では? 大文字小文字を間違えているとかそのあたりも 再確認なさってみてください

rusya
質問者

お礼

 回答ありがとうございます。  あれから何度もチェックと動作確認を繰り返しているのですが、一向に事態が進展しません・・・・・・。文字通り一字一句確認しましたが、スペルミスは見つけられませんでした。 いっそ記述方法を変えて、if文にした方がいいんでしょうか・・・・・・?

関連するQ&A

  • javascriptにてcss切り替え

    現在webサイトを作成しており、javascriptのcss切り替えにてページの色変更を作っています。 (青、緑、赤、三色で作成) デフォは青で表示しています。 その後緑、赤とリンクで色が変わるようにしています。 ここでご質問です。 緑をクリックした場合は緑に変わる(赤も同様)のですが、別ページにリンクした場合、緑(赤)ではなく青に戻ってします。 別ページにとんでも緑(赤)が引き継がれるにはどのように記述したらよろしいでしょうか? ソースは以下のとおりです。 <head> <link rel="stylesheet" type="text/css" href="css/blue/top.css" media="all" /> <script src="js/styleswitch.js" type="text/javascript"></script> <link rel="alternate stylesheet" type="text/css" title="blue" href="css/blue/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="green" href="css/green/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="red" href="css/red/top.css" media="all" /> </head> <body> <div style="width:200px;"> <a href="javascript:chooseStyle('blue', 30)">青</a><br /> <a href="javascript:chooseStyle('green', 30)">緑</a><br /> <a href="javascript:chooseStyle('red', 30)">赤</a> </div> </body> javascriptは以下のところからしようしています。 http://noongoro.main.jp/note/note0059.html javascriptは初心者です。 ご教授お願いいたします。

  • HTMLメールの外部CSSが有効になりません

    HTMLメールから以下のように外部CSS(http://から始めてます)を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか? <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>

  • IEのセキュリティにブロックされないようにするには

    皆さん、お力をお貸し下さい。 javascriptで以下のようなプログラムを持つウェブページを作成しているのですが、IEのセキュリティ保護(セキュリティ保護のため、コンピュータにアクセスできるアクティブ コンテンツは・・・)に引っ掛かってしまいます。このプログラムにウィルス等の脅威が含まれないことを示してブロックされにくくするといったことは出来ないでしょうか?全てのjavascriptがブロックされる訳ではないようですが、不勉強なもので、ブロックされる場合とされない場合の差が分かりません。妙案お授け下さいます様、お願い致します。 <script type="text/javascript" language="JavaScript"> <!-- today=new Date(); allseconds=today.getTime(); surplus=Math.floor(allseconds/(24*60*60*1000)); flag=surplus%5; style=new Array(5) style[0]='<link href="index_style/style01.css" rel="stylesheet" type="text/css">'; style[1]='<link href="index_style/style02.css" rel="stylesheet" type="text/css">'; style[2]='<link href="index_style/style03.css" rel="stylesheet" type="text/css">'; style[3]='<link href="index_style/style04.css" rel="stylesheet" type="text/css">'; style[4]='<link href="index_style/style05.css" rel="stylesheet" type="text/css">'; document.write(style[flag]); //--> </script>

  • JSでCSSを読み込む際に確立を設定したい

    ご助言いただけましたら幸いです。 下記のようにアクセス毎にランダムにCSSを読み込むJSがあります。 これを例えば「hoge.cssは10回中に7回」ようにするにはどのようにしたらよいのでしょうか。 var cssurl= new Array(); cssurl[0]="hoge.css"; cssurl[1]="hogehoge.css"; n= Math.floor(Math.random()*cssurl.length); document.write("<link rel='stylesheet' href='"+cssurl[n]+"'>"); どうぞよろしくお願いいたします。

  • Macfirefox3とMacfirefox2以下でCSSを切り替えたい

    MacのFirefox3は、Firefox2までとはデフォルトフォントサイズが 違うので、Firefox3とそれ以外のFirefoxで分けたいです。 今まで、CSSを以下のスクリプトでブラウザ別に分岐していました。 MacのFirefox3の分岐を増やしてみたのですが、それ以外のFirefoxのCSSに 分岐されてしまいます。 あまりJavascriptに明るくないので、 どうしてわかれてくれないものか困っています。 どうぞお知恵をお貸し下さい! ↓以下、かいてみたソースです。 var Win=(navigator.userAgent.indexOf("Win")!=-1); var Mac=(navigator.userAgent.indexOf("Mac")!=-1); var Explorer=(navigator.appName.indexOf("Explorer")!=-1); var Firefox=(navigator.userAgent.indexOf("Firefox") !=-1); var Netscape=(navigator.appName.indexOf("Netscape")!=-1); var opera=(navigator.userAgent.indexOf("Opera")!=-1); var safari=(navigator.userAgent.indexOf("Safari")!=-1); var Version=navigator.appVersion.charAt(0); if(safari){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Explorer && Version=="6"){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && Firefox){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && opera){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } /*増やしたところ*/ else if(Mac && Firefox && Version=="3"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); }/*増やしたところ終わり*/ else if(Mac && Firefox){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && opera){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/win_nn.css" type="text/css">'); } else if(Mac && Explorer && Version=="5"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Mac && Netscape && Version=="7"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else{ document.write('<LINK rel="stylesheet" href="/css/font.css" type="text/css">'); }

  • 時間帯によって背景を切り替えるJavascriptとCSS

    時間帯によって背景を切り替えるJavascriptとCSSを作りたいのですが以下の書き方で良いのでしょうか?切り替わるには切り替わるのですが、時間の指定がうまくいってないようです。。 また下の3行はJavascriptをOFFにしているときはこのCSSという意味で良いですか? <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function getCSS() { datetoday = new Date(); timenow=datetoday.getTime(); datetoday.setTime(timenow); thehour = datetoday.getHours(); if (thehour > 20) display = "includes/tree_twilight.css"; else if (thehour > 17) display = "includes/tree_sunset.css"; else if (thehour > 14) display = "includes/tree_afternoon.css"; else if (thehour > 11) display = "includes/tree_noon.css"; else if (thehour > 7) display = "includes/tree_morning.css"; else if (thehour > 4) display = "includes/tree_sunrise.css"; else if (thehour > 1) display = "includes/tree_twilight.css"; else display = "includes/tree_sunset.css"; var css = '<'; css+='link rel="stylesheet" href=' + display + ' \/'; css+='>'; document.write(css); // End --> } </script> <script language="javascript">getCSS();</script> <noscript> <link rel="stylesheet" href="includes/tree_sunset.css" type="text/css"/> </noscript> 宜しくお願いします。。

  • JavaScriptからCSSを呼び出す方法

    現在、Noscript時とJavaScript稼働時の呼び出すCSSを分けるため、下記のような設定をしています。whole.cssからJavaScript稼働時のCSSをimportしています。 IE6エラー内容は「'framename' が宣言されていません」です。 記述 <link href="whole.css" rel="stylesheet" type="text/css" id="css"/> <script> framename.document.getElementById ('css').href = 'whole.css'; </script> JavaScript稼働時に呼び込む設定となっています。 IE6のエラー以外他ブラウザーは正常に表示されます。 よろしくお願いします。

  • 一部のページにデフォルトCSSを読み込ませない方法

    一部ページにCSSを読み込ませない方法がありましたら、 ご教授ください。 例えば、 全ページに以下のCSSを共通で読み込ませてあります。 <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> しかし、test.htmlだけ <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> を読み込ませたくありません。 つまり、 <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" /> は通常通り読み込んで、 <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" />のみを 除外したいです。 * 共通のCSSは外すことはできません。 * また、CSSを新たに追加することもできません。 * head内にスクリプトを記述することができますが、スクリプトの記述で解決できますでしょうか。 自分で検索もしてみたのですが、答えに辿りつけません。 どのような方法がありますでしょうか。 何か方法がありましたら、ご教授ください。 よろしくお願いいたします。

    • 締切済み
    • CSS
  • JavaScriptを追加したい

    こんにちは。 こちら(ttp://f22.aaa.livedoor.jp/~sncspt/)のサイトさんの配布している「SNC THREADBBS 3」を使用したいのですが、その中に ***** <script type="text/javascript"> <!-- var url = "http://サイトアドレス"; if((document.referrer == "") || (document.referrer.match(url) == null)) { window.location.href = url; } // --> </script> ***** もしくは、 ***** <LINK rel="stylesheet" TYPE="text/css" HREF="javascript.js"> ***** のように入れたいのですが、どこにどう入れたらいいか分かりません。 そのサイトさんで聞けばいいのかもしれませんが、少し急いでいますのでどなたかアドバイスをお願いしたいです。 よろしくお願いします。

  • safari でcssがききません!

    こんばんは。 仕事でサイトを作っているのですが、Macのsafariでだけまったくcssが効かないという現象にぶちあたってしまいました。 下のように、外部cssを読み込み、文字サイズはcss.jsでwin、mac向けに指定してます。(文字サイズは表示されてます) <link rel="stylesheet" type="text/css" href="css/default.css"/> <script language="javascript" type="text/javascript" src="js/css.js"></script> Macのfirefoxではなんの問題もありません。 cssは覚えたてて経験浅く、どのあたりに原因があるのかさっぱり分かりません…。 どなたか、解決法、参考サイトなどありましたら、教えてください! よろしくお願いします。

専門家に質問してみよう