JavascriptでCSSを読み込んで適用させる方法
- Javascriptを使って<body>タグ内でCSSを読み込んで適用させる方法について教えてください。
- ページ読み込み時に自動でCSSを適用させる方法について、特にFireFox3での対策方法について知りたいです。
- 直接<head>タグ内でCSSを読み込む方法ではなく、Javascriptを使用して<body>タグ内でCSSを読み込んで適用させる方法を教えてください。
- ベストアンサー
<body>内のJavascriptでCSSを読み込んで適用させたい
理想：http://iswebmag.hp.infoseek.co.jp/sample171.html ※↑IEでは動作するけどFFで動作しない こんな感じの動作をページ読み込み時に自動で実行したいのですが、 FireFox3では上手く動作しないようです。 何かいい方法はありませんでしょうか？ html <body> <script type="text/javascript" src="roadcss.js"></script> </body> ＿＿＿＿＿ roadcss.js function roadcss(){ document.createStyleSheet('http://file.tubamesound.blog.shinobi.jp/clap.css'); document.getElementsByTagName('center')[1].className="hide";} roadcss(); もちろん<head>内で直接読み込めばいいよとかはなしですよ？
- idhokanohi
- お礼率58% (48/82)
- JavaScript
- 回答数4
- ありがとう数21
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
>もちろん<head>内で直接読み込めばいいよとかはなしですよ？ あるいみ正解。jsでヘッダにlinkタグを組みこみます。 そもそもスタイルシートはheadにしか書けないはずなので、 少なからずこれに似たような形になると思います。 html <html> <head> <script type="text/javascript" src="roadcss.js"></script> <script type="text/javascript"> window.onload=roadcss </script> </head> <body> test </body> </html> roadcss.js function roadcss(){ var tag=document.createElement('link'); tag.setAttribute("tyle","text/css"); tag.setAttribute("rel","stylesheet"); tag.setAttribute("href","http://file.tubamesound.blog.shinobi.jp/clap.css"); document.getElementsByTagName('head')[0].appendChild(tag); }
その他の回答 (3)
- yambejp
- ベストアンサー率51% (3827/7415)
あ、bodyで呼び出したかったんでしたっけ・・・ <html> <head> ・・・ </head> <body> test <script type="text/javascript" src="roadcss.js"></script> <script type="text/javascript"> window.onload=roadcss </script> </body> </html> でいけるんじゃないかなぁ・・・
お礼
おや、わざわざ補足ありがとうございます。 window.onload=roadcss(); じゃなくてもいいのかな？ 私はroadcss.jsの最後にroadcss();で処理しました。 とにかく解決できた。 ありがとうございました。
- pick52
- ベストアンサー率35% (166/466)
と思ったら、 document.createStyleSheet() はIE(Trident)専用の メソッドのようです。 他のブラウジングエンジンにも対応するなら document.createElement('style'); を使用しましょう。
お礼
なるほど、そうだったのですね。便利なのに。
- pick52
- ベストアンサー率35% (166/466)
よく分かりませんが、恐らくこの書き方は不適切なのでは。 本来なら head内で読み込んで <body onload="roadcss();"> のようにした方がいいと思います。 こうしたくない或いはできない理由はなんでしょうか。
お礼
回答ありがとうございます。 しかし、<body>以下でしか改変できないという特殊な状態だとお考えください。<head>はいじれません。 あと、あの書き方って不適切なのでしょうか？ どこかのスクリプとみてて見つけて、 一応動くので使ってました。
関連するQ&A
- javascriptをＣＳＳに書き込むと動作しません。何故ですか？
下記のjavascriptをＣＳＳに書き込みました。拡張子は.jsとしました。 jsのフォルダにtopmuv.jsというファイル名にしました。 <script type="text/javascript"> <!-- function blink() { if (!document.all) { return; } for (i = 0; i < document.all.length; i++) { obj = document.all(i); if (obj.className == "blink") { if (obj.style.visibility == "visible") { obj.style.visibility = "hidden"; } else { obj.style.visibility = "visible"; } } } setTimeout("blink()", 500); } // --> </script> </head> <body onload="blink()"> htmlの読み込みは <LINK rel="stylesheet" href="js/topmuv.js" type="text/javascript"> と書いています。 この場合、上記javascriptのソースをシート上にダイレクトに書き込むと正常に動作しますがｃｓｓにすると動作しません。 何が悪いのでしょうか？ 詳しい方宜しくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- 複数のjavascriptが作動しない
http://www.coolwebwindow.com/template/public.php 上記無料で配布されているホームページのテンプレートに 下記lightboxを設置しました。 http://lokeshdhakar.com/projects/lightbox2/ このテンプレートには、ページ内リンクへの移動がスムーズになる javascripが設置されているのですが、 このページにlightboxを追加すると スムーズに移動するjavascriptが無効になってしまいます。 <!--ページをスムーズに移動するjs--> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!--lightboxのjs--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> どのように対処すればいいのでしょうか？ ご教授お願いいたします！
- ベストアンサー
- JavaScript
- <head>外での、外部css、外部jsの読み込み
基本的な質問で失礼します。 <head>内ではなく、たとえば<body>内に外部cssと外部jsを読み込む際、 今まで、以下のようにスクリプトを書いて読み込んでおり、うまくいっていました。 <script type="text/javascript"> document.write('<link rel="stylesheet" type="text/css" href="hoge.css" media="screen,print">'); document.write('<script src="hoge.js" type="text/javascript"></script>'); </script> ところが、あるサイト作成時、上記スクリプトでは効かなくなってしまいました。 （HTML 4.01 Transitional） そこで、<head>内で書くように、以下のように記述したら、うまく機能しました。 <link rel="stylesheet" type="text/css" href="hoge.css" media="screen,print"> <script type="text/javascript" src="hoge.js"></script> 自分の中では、この記述は<head>内で書くときであって、<head>外ではうまく読み込めないと思っていたのです。 そもそも、<head>外なのに、このような書き方をしてよいものでしょうか？ まぁ、きちんと読み込めていて、動きも期待通りだから良いのでしょうが… 皆さん、どのように読み込んでいるのかなっと思い質問してみました。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- JavaScriptプラグインが読み込めません
「easySlider1.7」というJavaScriptプラグインを使い、サイト内の画像をスライドさせようとしています。 MacのデスクトップにおいたフォルダのHTMLと同じ階層にeasyslider1.7というフォルダをおき、<head>内に <script type="text/javascript" src="easyslider1.7/js/easySlider1.7.js" ></script> <script type="text/javascript" src="easyslider1.7/js/jquery.js"></script> と記述し、 <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto:true }); }); </script> で動作させようとしているのですが、 ブラウザで試すと動かず、コンソールには ReferenceError: Can't find variable: jQuery TypeError: Result of expression '$("#slider").easySlider' [undefined] is not a function. と出てきます。 上段の”jQuery”はeasySlider1.7.js内に記述されているものです。 ちなみにgoogleAPIのjQueryをロードしても同じエラーが出ました。 何が原因なのでしょうか。ご回答宜しくお願いします。
- ベストアンサー
- JavaScript
- [javascript] Dexagogoが動きません・・・。
こんにちわ。 このたび、下記URLにあるjavascriptを作動させようと悪戦苦闘しております・・・。 Really easy field validation * Dexagogo http://tetlaw.id.au/view/javascript/really-easy-field-validation 入力確認を行なうスクリプトで具体的には以下のURLのような動作を致します。 http://tetlaw.id.au/upload/dev/validation/ が、しかし全く動いてくれません・・・。 原因特定のため、無駄なタグをどんどん削っていきましたが、依然動作せず・・。 参考までにソースを添付致します。 <html><title>入力チェック</title> <head> <script src="scriptaculous/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous/src/effects.js" type="text/javascript"></script> <script type="text/javascript" src="fabtabulous.js"></script> <script type="text/javascript" src="validation.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <form action="#" method="get" id="test"> <br> <label for="field1">Name</label>:<input name="field1" id="field1" class="required" title="Enter your name" /> <br> <input type="submit"> </form> </body> </html> ご存知の方、お助けいただけると幸いです。
- 締切済み
- JavaScript
- JavaScript内にJavaScriptを読み込む方法
HTML内に <script type="text/javascript" src="main.js"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = '<script language="JavaScript">'; html += 'var url0101 = "url01.xxx.jp";'; html += 'var url02 = "url02.oooo.jp";'; html += '</script>'; html += '<script language="JavaScript" src="http://xxx.xxxx.xxx/test.js"></script>'); html += '<script language="JavaScript">'; html += 'Function01("check")'; html += '</script>'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- JavaScript内にJavaScriptを読み込む方法
HTML内に <script type=\"text/javascript\" src=\"main.js\"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = \'<script language=\"JavaScript\">\'; html += \'var url0101 = \"url01.xxx.jp\";\'; html += \'var url02 = \"url02.oooo.jp\";\'; html += \'</script>\'; html += \'<script language=\"JavaScript\" src=\"http://xxx.xxxx.xxx/test.js\"></script>\'); html += \'<script language=\"JavaScript\">\'; html += \'Function01(\"check\")\'; html += \'</script>\'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- prototipの設定
質問させていただきます。 <script src="js/prototype.js" type="text/javascript"></script> <script src="js/effects.js" type="text/javascript"></script> <script src="js/prototip.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="http://yourdomain/prototip.css"> <script type="text/javascript"> function init() { new Tip('test', 'ToolTip simple', {title: 'title'}); Event.observe(window, 'load', init, false); </script> </head> <body> <a href="" id="test">test</a> </body> </html> 以上のように記述して、動かしてみたのですが、動きません。 何処が違っているか解るか炊いたら教えていただけ無いでしょうか。
- ベストアンサー
- JavaScript
- css、javascriptの外部化について
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); }); </script> <!-- CSS --> <style type="text/css"> #slideshow { position:relative; width:320px; height:240px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <p>参照：<a href='http://jonraasch.com/blog/a-simple-jquery-slideshow'>A Simple jQuery Slideshow</a></p> <p>▼画像がフェードしながら切り替わります。</p> <!-- CODE --> <div id="slideshow"> <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" alt="" /> <img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" alt="" class="active" /> <img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e.jpg" alt="" /> </div> <!-- / CODE --> </div> </body> </html> 上記のソースをｈｔｍｌ、ｃｓｓ、javascriptの三つのファイルに分けたいのですが、、、ちょっと分からなかったもので、、、 お願いします 単純に cssファイル #slideshow { position:relative; width:320px; height:240px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } javascriptファイル function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); }); htmlファイル <script type="text/javascript" src="JSファイルのパス"></script> <link rel="stylesheet" type="text/css" href="cssファイルパス" /> -------------------------------------- 上記でいけると思ったのですが、、、単純すぎました よろしくお願いいたします
- ベストアンサー
- JavaScript
- Ajaxのウィンドウ表示位置について
ページを開くとAjaxのウインドウが表示されるようになっています。 バックには既にサイトが表示されている状態でその上にウインドウが出てくるイメージです。 ソースは以下のようになっています。 <html> <head> <title>titletitle> <script type="text/javascript" src="js/prototype.js"> </script> <script type="text/javascript" src="js/effects.js"> </script> <script type="text/javascript" src="js/window.js"> </script> <script type="text/javascript" src="js/window_ext.js"> </script> <script type="text/javascript" src="js/debug.js"> </script> <link href="css/default.css" rel="stylesheet" type="text/css"> <link href="css/spread.css" rel="stylesheet" type="text/css"> </head> <body> <script type="text/javascript"> var win = new Window({className: "spread", title: "タイトル", top:50, left:50, width:500, height:500, zIndex: 100, url: "http://www.linkstyle33.com/", showEffectOptions: {duration:3}}) win.show(); </script> --サイトここから-- --サイトここまで-- </body> </html> top:50, left:50,で表示位置を設定することはわかるのですが ウインドウの真ん中に出したいのですがやりかたがわかりません。 試しに50%としてみたもののpx指定になっているようで表示すらされませんでした。 サイトがバックにある状態でウインドウを出したいのでiframe以外で ウインドウを真ん中に表示する方法はあるのでしょうか？
- 締切済み
- JavaScript
お礼
おー、そうきましたか～ このjsを <body onload="roadcss();"> <script type="text/javascript" src="roadcss.js"></script> </body>で読み込んだりするのは やっぱり無理かなぁ・・・無理そうだなぁ・・・ 明日やってみます、ありがとうございました。