• ベストアンサー

JavascriptからのCSSによる表示・非表示制御

よろしくお願いします。 Javascriptからスタイルシートの表示・非表示の制御をしようとしています。まず、下記の一文を見ていただきたいのですが $("object").css("visibility","hidden"); １．上記の記述の意味をできれば詳しく解説していただきたいのです。 （$("object")は何を指す・・・とか） ２．上記記述で、IE6、IE8、FF3、Safariなどでは動作するのですが、IE7やIE8の互換表示では上記がうまく動作しないようなのですが、IE7でも動くようにするにはどうすればよいでしょうか？ よろしくお願いします。

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

$(ｘｘｘ)は、javascriptというより、javascriptライブラリーで htmlの要素の選択によく使われる構文です。 prtotype.jsとかｊQueryとかMooToolsなんかに $(ｘｘｘ) の構文があります。ライブラリーによって意味や使い方が違います。 　お使いのライブラリーのリファレンスや解説ページで確認された方がよろしいかと思います。 $("object").css("visibility","hidden"); はjQueryっぽいですね。jQueryだとして、 これを普通のjavascriptで書くと var elements = document.getElementsByTagName("object"); for(var i=0;i<elements.length;i++){ elements[i].style.visibility="hidden"; } といったところでしょう。 jQueryだと$()はセレクターとして働き、 　$("#hoge")　－－－　ID="hoge"の要素 　$(".hoge")　－－－　classs="hoge"の要素 　$("hoge")　－－－　<hoge>の要素 等のように選択できます。組み合わせ、階層、フィルターに よる選択も$()で行います。

ok-rjak
質問者

お礼

なるほど、よく分かりました。 リファレンスや解説ページを読む暇がなかったので（まぁ、いいわけになりますけどね・・・）、とても参考になりました。 ちなみに、お察しの通りjQueryです。ありがとうございました。

その他の回答 (2)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">​ と、XHTMLなのですが、XHTMLではjQueryは正常に動作しないと言うことですか？ =>おかしいですね、IE7でそれだと標準モードになるはずですけどね。 互換モードだと、jQUERYはうまくいかないです。 DOC宣言の前に <?xml version="1.0" encoding="utf-8"> があると互換モードになってしまうIEもあるとか？ 下記が参考になります http://w3g.jp/others/data/doctype_switching http://hxxk.jp/2008/09/29/0118#sub-20080929-06

ok-rjak
質問者

補足

何度もありがとうございます。 ＞ <?xml version="1.0" encoding="utf-8"> 上記記述がなく、 <!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"> <head> と続いています。 何が悪いのか、皆目見当が付かない次第です。 ありがとうございました。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

補足 １．上記の記述の意味をできれば詳しく解説していただきたいのです。 .css("visibility","hidden") はjQueryのAPI(メソッド)です。 　下記参考サイトを見て下さい。 http://docs.jquery.com/Core http://semooh.jp/jquery/ http://www.openspc2.org/JavaScript/Ajax/ref/jQuery/ver1.3.2/index.html ２．上記記述で、IE6、IE8、FF3、Safariなどでは動作するのですが、IE7やIE8の互換表示では上記がうまく動作しないようなのですが、IE7でも動くようにするにはどうすればよいでしょうか？ ＝＞ jQUERYをまともに使うならDOC宣言文を <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> のように指定する必要があります。

ok-rjak
質問者

補足

DOCTYPE宣言が現在 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> と、XHTMLなのですが、XHTMLではjQueryは正常に動作しないと言うことですか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

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

  • for文の記述方法について

    外部javascriptファイルに以下のような記述をしているのですが、 この内容をfor文を使用して一行にまとめる記述方法を教えていただけないでしょうか。 初歩的な質問で本当に申し訳ございません。 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>"); document.write("<style type='text/css'>#thephoto4 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto5 {visibility:hidden;}</style>"); 何卒、宜しくお願い致します。

  • Flashで作成したボタンをJavascriptに使用したい

    JavaScriptで下記のような記述をしました。 function btnCli(con) { document.all("main").style.visibility="hidden"; document.all("company").style.visibility="hidden"; document.all(con).style.visibility="visible"; } Flashで作成したボタンには <a href = "javascript:btnCli('company')";> <Flashのボタン>←ここに記述してる </a> としているのですが、関数の引数にcompanyが渡らないらしく画面が表示されません。 表示させたい画面には <div id = "company" style ="visibility:hidden; z-index:16;"> ～ と記述しております。 本文・背後の文と何枚か文を重ねていてメニューのボタンをクリックすると入れ替わるようにしたいのですが できますでしょうか？ ちなみにFlashで作成したボタンではなく、ただの文字や普通の画像であれば出来ました。

  • 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> ////////////////////////

  • オンラインとオフラインでのcssとjavascriptの適用のされ方？

    いろいろ調べてみたものの、どうにも解決できなかったので質問させてください！ javascriptとcssを使ったサイトを作っているのですが、次のような障害が生じています。 １．オフラインで作ったときにfirefoxで見たときには、問題なく表示されたものがオンラインではcssが全く適用されていない。 ２．１．で作ったものをオンライン上でIEやSleipnirを使ってみると、問題なく表示されるものの、オフラインではjavascriptが働いていない。 ３．オンライン／オフラインどちらも正しく表示されるのはOperaとSafariだけ。 ４．作成したhtml／css／javascriptはDreamweaverCS3のブラウザ互換性のチェックを問題なくパスする。 このような障害の対策についてご存知の方がいらっしゃいましたら、お教えください。

    • ベストアンサー
    • CSS
  • FireFoxでのブロック表示・非表示制御

    DIVタグで囲んだ各ブロックの表示・非表示をJavascriptで動的に制御したく、下記のソースの通りJavascriptで表示の切り替え処理を記述したところ、IE6.0では動作しましたが、FireFox2.0では切り替えリンクをクリックしても無反応の状態となってしまいました。 FireFoxのJavascript互換について経験不足のため原因がつかめず困っております。 FireFoxでも動作可能となるには、どのような記述をすればよろしいでしょうか。もしご存知の方がおられましたら宜しくお願い致します。 *** Javascriptソース ****************** function showArea(areaId){ A.style.display="none"; B.style.display="none"; C.style.display="none"; areaId.style.display="block"; } *** ブロック切り替え用リンク ****************** <a href="javascript:showArea(A)">Ａブロック</a> <a href="javascript:showArea(B)">Ｂブロック</a> <a href="javascript:showArea(C)">Ｃブロック</a> *** 表示用ブロック ****************** <div id="A"> Ａブロックの記述内容 </div> <div id="B"> Ｂブロックの記述内容 </div> <div id="C"> Ｃブロックの記述内容 </div>

  • 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> 以上です。まだまだ超初心者です。よろしくお願いいたします。

  • NN7.0でレイヤーの表示・非表示

    レイヤーの表示・非表示のスクリプトなんですが、 function OpenLayer() { //NNの場合 if(document.layers) { document.content_menu.visibility="visible"; } //IEの場合 else { content_menu.style.visibility="visible"; } } function CloseLayer() { //NNの場合 if(document.layers) { document.content_menu.visibility="hidden"; } //IEの場合 else { content_menu.style.visibility="hidden"; } } に書きました。 IE6.0では動作しますがNN7.0では何も起こりません。 どなたかどのように表記をすればいいのか教えてください。よろしくお願いします。

  • javascriptの中にcssを書いても動作しません

    以下のようにIF分の中へCSSを記述していますがどうしてもエラーになってしまいます。 if(条件){ document.form1.name.focus(); style.backgroundColor="#ff66ff"; return false; } これを実際に動かすと「styleが定義されていません」とエラーになります。 nameに対してcssで色を変更したく色々書き方を変えたりしたんですが いずれも同じ行でエラーになってしまいます。 該当箇所を消すとすべて綺麗に動きます。 上記のような例で該当箇所をCSSとして認識させ正常に動かすにはどのように記述したらいいのでしょうか？

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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する