引数を2個使いたい場合 Javascript

このQ&Aのポイント
  • Javascriptについてアドバイスお願い。テキスト画像をクリックすることでCSSを入れ替えるスクリプト作成。ローカルでは動作するが、サーバーにUP後、IEで動かなくなった。アドバイスお願い。
  • Javascriptのアドバイスお願い。テキスト画像をクリックしてCSSを入れ替えるスクリプトを作成したが、ローカルでは動作するが、サーバーにアップロードしたらIEで動かなくなりました。アドバイスをお寄せください。
  • Javascriptのアドバイスをお願いします。テキスト画像をクリックすることでCSSを入れ替えるスクリプトを作成しましたが、サーバーにアップロード後、IEで動作しなくなりました。アドバイスをお願いします。
回答を見る
  • ベストアンサー

引数を2個使いたい場合 Javascript

こんにちは。 Javascriptについてアドバイスお願いします。 ■やりたいこと 「普通」「大きい」と言うテキスト画像をクリック することでCSSを入れ替える。 ・外部JSにしたい ・<input>のボタンではなく画像を使う ・一つのページで使うCSSは2種類(共通.cssと各頁ごとの設定用) 作ってみたスクリプトは下記の通りです。 function chooseCSS(csstype,cssname){ if(csstype == "normal"){ document.getElementById("baseCSS").href = "base.css"; document.getElementById("eachCSS").href = cssname + ".css";} else{ document.getElementById("baseCSS").href = "base2.css"; document.getElementById("eachCSS").href = cssname+"2.css";} } --------------------------------------------- HTMLの記述 ☆head内 <link href="base.css" rel="stylesheet" type="text/css"> <link href="base.css" rel="stylesheet" type="text/css" id="baseCSS"> <link href="top.css" rel="stylesheet" type="text/css"> <link href="top.css" rel="stylesheet" type="text/css" id="eachCSS"> ☆body内 <a href="javascript:void(0)" onClick="chooseCSS('normal','top')"><img src="img/btn01.gif" border="0" class="normal"></a> <a href="javascript:void(0)" onClick="chooseCSS('big','top')"><img src="img/btne02.gif" border="0" class="big"></a> --------------------------------------------- ローカルでは動いていたのでサーバーにUPしたらネスケとsafariは動作するのにIE(JSの設定は有効になっていました)だけ動かなくなりました。 あまりJavascriptは得意ではないので どなたかアドバイスお願いいたします!

  • RH01
  • お礼率92% (86/93)

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.4

>動作するようになりました。 良かったですね。 ムダなアドバイスで煩わせてすみませんでした。 結局、なんなのですかね~。 <a href="#" onClick="chooseCSS('big','top');return false"> とかでもいいかも

RH01
質問者

お礼

ムダなんてとんでもない!本当に助かりました ありがとうございました(^^)

その他の回答 (3)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

>ローカルでは動いても >アップすると上手く動きませんでした。 こちらでも、ネットワーク上にアップしても試してみましたが特に問題ありませんでした。 切り換える前のスタイルが表示されているということは、 おそらくパスの設定も間違いではない(同じフォルダにあるなら)のではないかと思います。 後は、ローカルで動いてサーバーで動かないというよくある原因としては、ファイル名が大文字小文字などを区別するということがあります。 ファイル名が違っていたり、日本語を使用していたりすることはないでしょうか?

RH01
質問者

お礼

何度も申し訳ありません。 自分でも色々試していたらHTMLの記述を変更してみたら動作するようになりました。 <a href="javascript:chooseCSS('normal','top');"><img src="img/btn01.gif" alt="普通" class="normal"> ファイル名は全てアルファベット小文字にしてありましたし、BLUEPIXYさんはネット上でも動いているとお聞きしてスクリプトの問題ではないのだなと思ったら気がつきました。 何しろ自分で考え考え書いたスクリプトなので、そこに問題がある、と思っていたので・・・。 でも、onclickでもBLUEPIXYさんの場合は動いているのでその辺は謎のままですが^^; 丁寧にアドバイスして頂きありがとうございました!

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

>やはりスクリプト自体に問題があるのでしょうか・・ その後色々試してみたのですが、 2つのCSSをこのスクリプトのようにして切り換えて、問題なく動きました。 おそらく、CSSにゴミがあるとか、CSSの一部がおかしいのではないかと思います。 一度すごく単純なCSSでテストされてみてはどうでしょうか?

RH01
質問者

補足

色々試していただいたようでありがとうございます! font-sizeとcolorを変更しているだけのCSSで 試したのですが、やはりローカルでは動いても アップすると上手く動きませんでした。 BLUEPIXYさんの時は問題なく動いた、と言うことは サーバーも関係あるのか・・ 呼び出す時のパスを document.getElementById("baseCSS").href = "/test/font/css/base.css"; の用にルートからの絶対パスにしてみたりもしたのですが ネットにあげた物をIEで見ると動かない状態でした。 もう少し試してみたいと思います。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

<link href="base.css" rel="stylesheet" type="text/css"> <link href="base.css" rel="stylesheet" type="text/css" id="baseCSS"> <link href="top.css" rel="stylesheet" type="text/css"> <link href="top.css" rel="stylesheet" type="text/css" id="eachCSS"> を <link href="base.css" rel="stylesheet" type="text/css" id="baseCSS"> <link href="top.css" rel="stylesheet" type="text/css" id="eachCSS"> だけにしてみたらどうでしょう

RH01
質問者

補足

BLUEPIXYさん、アドバイスありがとうございます。 ご指摘の箇所を試してみました。 ページを開いたときはCSSが聞いている状態ですが ボタンをクリックすると、レイアウトが崩れて縦にだーっと並んだ状態になったので CSSを切り替えていないようです。 やはりスクリプト自体に問題があるのでしょうか・・

関連する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は初心者です。 ご教授お願いいたします。

  • 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のエラー以外他ブラウザーは正常に表示されます。 よろしくお願いします。

  • Javascriptの勉強初めました!

    初心者です最近javascriptの勉強を初めまして一つ一つ記述の 意味を理解してjavascriptにだんだん慣れていこうと思っています。 退屈な質問かと思いますがどなたかお付き合いください。 下記の記述の最後に「title="fontproperty"」とありますがこれはどういった意味の記述なのでしょうか? document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"../shared/css/"+var_css+".css\" title=\"fontproperty\">");

  • 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">'); }

  • cssの振り分けについて

    下記のjavascriptの内容でわからないのでおしえてください。 if(cssFile){ if (document.getElementById && !opera5 && !opera6 && !(mac && ie5) && !icab){ var head = document.getElementsByTagName('HEAD').item(0); var newLink = document.createElement('LINK'); newLink.rel = "stylesheet"; newLink.type = "text/css"; newLink.href = cssFile; head.appendChild(newLink); }else{ document.open(); document.write('<link rel="stylesheet" href="' + cssFile + '" type="text/css">'); document.close(); } } よろしくお願いします。

  • フォントのサイズが変わってしまいサイトが崩れる

    IEとファイヤーフォックスでフォントのサイズが変わってしまい、自作サイトが崩れてしまいます。 調べたところ下記のような情報があったのですが、この方法がよいのでしょうか? http://kudox.jp/html-css/font-size-css また上記通りにする場合下記は <link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" /> <![endif]--> 最優先させるのでしょうか?最優先なら下記のような感じでよいのでしょうか? <link rel="stylesheet" href="reset.css" type="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" /> <link rel="stylesheet" href="page.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" /> <![endif]--> またmedia="all"はとりあえずすべてにつけておいたほうがよい属性と考えてよいのでしょうか? 教えてください。

    • ベストアンサー
    • HTML
  • 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>

  • 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"> ***** のように入れたいのですが、どこにどう入れたらいいか分かりません。 そのサイトさんで聞けばいいのかもしれませんが、少し急いでいますのでどなたかアドバイスをお願いしたいです。 よろしくお願いします。

  • スタイルシートのリンクをはる時・・・

    <link href="css/common.css" rel="stylesheet" type="text/css">と <link href="/css/common.css" rel="stylesheet" type="text/css">の違いを教えてください。

  • base hrefとlink rel

    テキストエディタでhtmlを書いています。 外部cssを使うので、 <link rel="stylesheet" href="style.css" type="text/css"> をヘッダ部に入れていますが、これより上に <base href="~"> で基準URIを指定しようとすると、cssが反映されなくなってしまいます。 先に <link rel="~ を入れてしまうと、文法チェックで引っ掛かるのですが、どうしたら良いのでしょうか? ソースは、 <Head> <base href="絶対パス"> <link rel="stylesheet" href="style.css" type="text/css"> で、この後にmeta属性を入れています。 よろしくお願い致します。

    • ベストアンサー
    • HTML

専門家に質問してみよう