• 締切済み

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のソースをシート上にダイレクトに書き込むと正常に動作しますがｃｓｓにすると動作しません。 何が悪いのでしょうか？ 詳しい方宜しくお願いします。

みんなの回答

noname#100277
noname#100277
回答No.2

>>javascriptをＣＳＳに書き込みました。 javascriptはCSSファイル内に記述しても無意味です。 別途「js」ファイルに記述すべき。 javascriptの中身が本当に正しい記述で直接（内部参照）記述で正常に反映するなら、参照先が間違ってるのでは？ HTMLからの参照でディレクトリは正しい場所を参照してますか？

kfjbgut
質問者

お礼

有難うございました。 jsには記述していたのですが、余分な記述があったようです。

  • gungnir7
  • ベストアンサー率43% (1124/2579)
回答No.1

文法が少しおかしいようですが、普通はjavascriptはscriptタグに書きます。 <script src="js/topmuv.js" type="text/javascript"></script> でいいような気がしますが、これだとまずいのですか？

kfjbgut
質問者

お礼

有難うございます。 記載しましたが、エラー表示になりました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. その他([技術者向] コンピューター)

関連するQ&A

  • IEでもFirefoxでも動作する点滅文字について

    IEでもFirefoxでも動作する点滅文字について Internet ExplorerでもFirefoxでも動作する点滅文字を作成するため、 下記のサンプルソースを作成したのですが、 Internet Explorer7では動作するものの、Firefox3.6では動作しませんでした。 その為、Internet ExplorerでもFirefoxでも動作する点滅文字の方法をご存知の方がいらっしゃいましたら、 ご教示の程、よろしくお願いします。 なお、下記の動作を想定しています。 1. 点滅時間は設定ファイルに記述して、点滅時間を調整したいと思います (その為、<blink>タグは使用できないかも知れません)。 2. ページ内の複数の箇所に設定したいと思います (ただし、設定箇所が何箇所になるかは、ページが動的に生成されているため、ランダムです。 その為、id属性で動作するものは使用できないかも知れません)。 3. MARQUEEタグを使用するものについては、位置あわせがうまく出来ませんでした。 【ソース】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>title</title> <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()", 800); } // --> </script> </head> <body onload="blink()"> <h1 class="blink">点滅サンプル</h1> <p>これは普通の文書</p> <p class="blink">これは点滅する文章</p> </body> </html> 以上、よろしくお願いします。

  • javascriptでのフェードイン

    javascriptを使用してhtml上の画像をフェードインにて表示したいと思っております。 ネット上の情報とこちらのサイトでのアドバイスを元に以下のソースを使用しておりますが WindowsのIE（6&7）で確認すると「エラー：オブジェクトがありません」と表示されてしまいます。 こちらで確認したところjavascript最後の行の「window.onload～」がエラーの原因となっているようなのですが、 修正する記述方法が分からず困っております。 解決策をご存じの方がおられましたらお手数ですが、 ご教授いただけないでしょうか。 何卒、宜しくお願い申し上げます。 ///javascript file（fade.js）/// document.write("<style type='text/css'>#thephoto1 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto2 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto3 {visibility:hidden;}</style>"); function initImage() { for(i=1;i<4;i++){ imageId = 'thephoto' + i; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(imageId,0); } } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 25; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } window.onload = function() { initImage() } //////////////////////// ///html file/// <html> <head> <script type="text/javascript" src="fade.js"></script> </head> <body> <img src="img_01.jpg" id="thephoto1" /> <img src="img_02.jpg" id="thephoto2" /> <img src="img_03.jpg" id="thephoto3" /> </body> </html> ////////////////////////

  • IE6ではjavascriptが動くのにNN7.1では動かない。

    ”コンピューター家庭向け”のところでも質問したのですが、回答がないのでここで質問させていただきます。 HTML部分 <div class="galico"> <script language="javascript" src="poser.js"></script> <a href="javascript:showgallery()"> <img src="../base/gallery.gif" alt=""> </a> </div> SSC部分 .galico { z-index: 3; position: relative; top: 29px; left: -200px; } javascript部分 function showgallery(){ if ( document.all )document.all('gallery').style.visibility ='visible' else if ( document.layers )document.layers['gallery'].visibility ='show' else if ( document.getElementById )document.getElementById('gallery').style.visibility ='visible' } この記述で、IE6では思った通りに動いてくれます。（"../base/gallery.gif"をクリックするとjavascriptを実行してくれる。） ところが、NN7.1では "../base/gallery.gif" に触れても、ステータスバーにjavascriptにリンクするように表示もされないし、クリックしても動きません。 なぜかSSCの "position: relative;" を "position: absolute;" にしてやると動くのですが。。。 なぜでしょうか。わかりやすく教えていただけないでしょうか。

  • javascriptでのフェードイン

    javascriptで画像表示をフェードインにしたいと思っております。 ネット上の情報から以下のソースを使用しております。 1html上に一つの画像を配置すると問題無く機能するのですが、 複数の画像を表示しようとすると一つ目の画像しか表示されません。 どこを変更すれば良いのか分からず困っております・・・ 修正方法、もしくはもっと簡単な方法がございましたら教えていただけないでしょうか。 ※以下のサンプルでは画像は二つですが、実際の使用時には制約上は無制限で画像を配置する予定です。 （Photologのサムネイル表示での使用を想定しております。） ///javascript file/// document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>"); window.onload = function() {initImage()} function initImage() { imageId = 'thephoto'; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(imageId,0); } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 25; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } window.onload = function() {initImage()} //////////////////////// ///html file/// <html> <head> <title></title> <script type="text/javascript" src="fade.js"></script> </head> <body> <img src="img_01.jpg" id="thephoto" /></div> <img src="img_02.jpg" id="thephoto" /></div> </body> </html> //////////////////////// どなかたご教授いただけますでしょうか。 何卒、宜しくお願い申し上げます。

  • IEだけで動きません。Javascriptに関する質問です。

    IEだけで動きません。Javascriptに関する質問です。 初心者です。よろしくお願いします。 下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。 ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。 他のブラウザでは動きました。 どうしてでしょう？ 悩んでいます。 どなたか教えてください。よろしくお願いいたします。 <html> 　　<head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script> 　　</head> <body> 　　<div id="container"> 　　</div> 　　　　　　<div id="menu"> 　　　<ul> 　　　<li><a href="javascript:changeObj('a.htm')" title="a">a</a></li> 　　　<li><a href="javascript:changeObj('b.htm')" title="b">b</a></li> 　　　<li><a href="javascript:changeObj('c.htm')" title="c">c</a></li> 　　　</ul> 　　</div> 　　　　</body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html> 　<head> <script type="text/javascript" src="bbb.js"></script> 　</head> 　　<body> <div id="page-height"> <div id="a"><!--ここにページ内容--> </div> </div> 　　</body> </html>

  • JavaScriptのテーブルの背景色を保存させたい

    とある下記のフリーソースからJavaScriptにてテーブルの背景色を変えるのを作ったのですが、複数の人とページを共有したいので色を変更後、保存させておきたいです。 <script language="JavaScript"> function my_bgcolor(dore) { if(document.all)document.all("lay0").style.backgroundColor=dore; } function cell1(dore) { if(document.all)document.all("lay1").style.backgroundColor=dore; } //--> </script> ※テーブルに色を指定するソースは以下のものです <td id="lay0" style="position: relative; visibility: visible"> どこかへSubmitして、外部ファイルへ保存しないといけないと思うので、上の動作ができるCGIのなにかよい案、似たようなソースをご存知の方がいましたら教えてください。

    • 締切済み
    • CGI
  • 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は初心者です。 ご教授お願いいたします。

  • これは何をするスクリプトですか？

    <head> <script type="text/javascript"> <!-- function loading() { if (document.getElementById){ document.getElementById('load').style.visibility = 'hidden'; } else { if (document.layers){ document.layers['load'].visibility = 'hidden'; } else { document.all('load').style.visibility = 'hidden'; }}} // --> </script> </head> <body onload="loading()"> 詳細は略して書いています。 プログラムに全く詳しくないので、何をやろうとしているスクリプトなのかわかりません。 皆様には簡単かとは思いますが、よろしくお願いします。

  • JavaScriptがfirefoxで作動しない

    IEでは正しく作動するjavascriptがfirefoxではうまく作動しません。なぜなのかどなたか教えてください・・・・！ <script type="text/JavaScript"> flag = false; function pd1() { if(flag) ID1.style.visibility = "hidden"; else ID1.style.visibility = "visible"; flag = !flag; } </script> ここからhtml <div id= "w1"><a href="javascript:pd1()" >テキスト</a></div> <div id="ID1" style="visibility: hidden;"> <p>テキスト</p></div> 以上です。まだまだ超初心者です。よろしくお願いいたします。

  • <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>内で直接読み込めばいいよとかはなしですよ？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する