• ベストアンサー

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(); } } よろしくお願いします。

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

  • ベストアンサー
  • Ysan
  • ベストアンサー率32% (44/136)
回答No.2

if(cssFile){ →cssFileがあれば、以下を実行。(なかったときにブラウザがハングするのを防ぐため) If (document.getElementById && !opera5 && !opera6 && !(mac && ie5) && !icab){ ~ } →DOMをサポートしているブラウザならば、HEADにlink子ノードを作ってcssを読み込ませる。 else{ ~ } →そうでなければ<link rel="stylesheet" href="' + cssFile + '" type="text/css">をDocumentの中に追加する。 ていう感じでしょうか

その他の回答 (1)

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

<link rel="stylesheet" href="' + cssFile + '" type="text/css"> を動的に作ってるみたいですが

関連するQ&A

  • CSSをあとから読み込みたい。

    「CSS読み込み」クリックで、追加CSSを読み込みたいのですが、 以下のやり方でIE6以外ではできたのですがIE6で動きません。 どなたかアドバイスいただけると幸いです。 ▼JS=============================================================== function roadcss(){ if(navigator.userAgent.indexOf("MSIE") > -1){ document.createStyleSheet('/answer.css'); } else { var tag=document.createElement('link'); tag.setAttribute("type","text/css"); tag.setAttribute("rel","stylesheet"); tag.setAttribute("href","/answer.css");​ document.getElementsByTagName('head')[0].appendChild(tag); } } ▼HTML============================================================= <a href="javascript:void(0)" onClick="roadcss()">CSS読み込み</a>

  • 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の切替スクリプト

    ブラウザによるCSSの切替スクリプトを作りましたが上手くいきません。 ====css.js====================================================== function browserCheck(){ //変数myBrowにユーザの環境を代入 myBrow = navigator.userAgent; //変数myBrowに文字列Operaが入っていた場合(Opera)の処理 if (myBrow.match(/Opera[\/\s](\d\.\d+)/))     document.write("<link rel="stylesheet" type="text/css" href="Opera.css" charset="Shift_JIS">"); //Operaの処理 //変数myBrowに文字列MSIEが入っていた場合(IE)の処理。 //Operaにも文字列MSIEが入っているため、Operaの処理の後に行います。 else if (myBrow.match(/MSIE (\d\.\d+)/))     document.write("<link rel="stylesheet" type="text/css" href="MSIE.css" charset="Shift_JIS">"); //MSIEの処理 //変数myBrowに文字列Firefoxが入っていた場合の処理。 else if (myBrow.match(/Firefox[\/\s](\d\.\d+)/))     document.write("<link rel="stylesheet" type="text/css" href="Firefox.css" charset="Shift_JIS">"); //Firefoxの処理 //変数myBrowに文字列Netscapeが入っていた場合の処理。 else if (myBrow.match(/Netscape[\/\s](\d\.\d+)/))     document.write("<link rel="stylesheet" type="text/css" href="Netscape.css" charset="Shift_JIS">"); //Netscapeの処理 //上記以外の処理 else myBrow = "unknown"; //それ以外のブラウザ     document.write("<link rel="stylesheet" type="text/css" href="unknown.css" charset="Shift_JIS">"); //それ以外のブラウザの処理 } ================================================================ <html> <head> <script language="JavaScript" src="css.js"></script> <Script language="JavaScript"><!-- browserCheck(); //--></Script> </head> </html> どこか間違っているでしょうか? ご回答、宜しくお願い致します。

  • domについていまいちわからないので教えていただきたいのですが

    <link rel="stylesheet" href="default.css" type="text/css" /> 例えばこのタグで rel要素のstylesheetという値を取得したいのですが webbrowser1.document.getelementsByTagname("link") の後にどのように記述すれば取得できるのでしょうか?教えてください。お願いします。

  • CSSが反映されないで困っています;;

    日本のホストの時は、CSSがHTMLにうまく反映されていたのですが、 ホストを海外の T35Hosting と Graffiti.net で同じ様に挑戦したら CSSが反映されませんでした;; index.htmlのヘッド内に下記を書いて、 top.cssの名前でCSSを書きました。 <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="top.css" type="text/css"> </head> なぜか、反映されませんでした;; 「/」(ルートディレクトリ)と何か関係あるのでしょうか。 <link rel="stylesheet" href="top.css" type="text/css">の行の href="top.css" を href="/.top.css" などに変えなくてはいけないのでしょうか。。。 お知りの方 よろしくお願いします。

  • 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ファイルを読み込めるようになりますか?

  • 一部のページにデフォルト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
  • ブラウザの解像度横幅1280の時スタイルシートを記述したいのですが

    記述が間違ってると思われうまくいきません。 どなたか間違ってるところを指摘してくださいませ。。 初心者ですお願い致します。 <html> <head> <title>モニタサイズに合わせてウィンドウサイズを変更する</title> <script Language="JavaScript"><!-- w = screen.width; moveTo(0,0); if (w == 1280) { document.write ("<link rel=stylesheet href="'+ a.css +'" type="text/css">"); } else if () { document.write("<link rel=stylesheet href="'+ b.css +'" type="text/css">"); } // --></script> </head> <body> </body> </html> なおa.cssには、背景黒くしてます。

  • 【PHP】UA判別によるCSSの振り分け

    PHPはドのつく初心者です。 現在PHPでCSSの振り分けに挑戦しています。 私が持っている機種はauガラケーとAndroidだけですので、iPhoneなどの挙動確認はFireFoxのUA変更アドオン「User Agent Switcher」で行っております。 auガラケー実機で以下のPHPは正しく振り分けられていたのですが、FireFoxのアドオンにてDoCoMoのUAでアクセスした場合に、ガラケーのCSSに加えてPC(その他)のCSSが読みこまれてしまいました。 <link rel="stylesheet" type="text/css" href="garak.css" media="all"> <link rel="stylesheet" type="text/css" href="design.css" media="all"> ↑このような感じです。 auのUAアクセスでも同様の症状が発生していますが、こちらはガラケー本体で動作確認できているので大丈夫だとは思います。もしかしたらちゃんと実機で読みこめば行けるのかな?と思いつつ、不安が残っております。 DoCoMo実機は家にないので確認の仕様がありません。 以下のPHPでDoCoMo機種の動作は正しくいくのでしょうか? <?php $ua = $_SERVER['HTTP_USER_AGENT']; if ((strpos($ua,'DoCoMo') !== false) || (strpos($ua,'KDDI') !== false) || (strpos($ua,'UP.Browser') !== false) || (strpos($ua,'J-PHONE') !== false) || (strpos($ua,'Vodafone') !== false) || (strpos($ua,'SoftBank') !== false) ) { echo '<link rel="stylesheet" type="text/css" href="garak.css" media="all">'; } if ((strpos($ua,'iPhone') !== false) || (strpos($ua,'iPod') !== false) || (strpos($ua,'Android') !== false) ) { echo '<link rel="stylesheet" type="text/css" href="smart.css" media="all">'; } else { echo '<link rel="stylesheet" type="text/css" href="design.css" media="all">'; } ?>

  • ブックマークレットの() 背景文字色変更

    下のスクリプトの最後の () はどうして必要なのでしょうか? ないとうまく機能しないので必要なことは間違いないのですが…… javascript:( function() { var newCSS, styles=' * { background: white ! important; color: black !important } '; if(document.createStyleSheet) { document.createStyleSheet("javascript:'"+styles+"'"); } else { newCSS=document.createElement('link'); newCSS.rel='stylesheet'; newCSS.href='data:text/css,'+escape(styles); document.documentElement.childNodes[0].appendChild(newCSS); } })();