- ベストアンサー
Class属性をJavaScriptで動的に切り替える
http://youmos.com/reference/set_element_class.html 上記のサイトを参考に”Class属性を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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- .left { float:left; margin:0px 12px 12px 0px; } .right { float:right; margin:0px 0px 12px 12px; } --> </style> <script type="text/javascript"> var changed = false; function changeSample(){ if(changed){ setElementClass('sample_img','left'); }else{ setElementClass('sample_img','right'); } changed= (changed)?false:true; } //class要素の追加・変更 function setElementClassById(elem, value) { if(document.getElementById) { var obj = document.getElementById(elem); if(obj) { obj.className = value; } } } addListener(document.getElementById('sample_img'), 'click', changeSample, false); </script> </head> <body> <p><img src="pic_1.gif" alt="setElementClassById" id="sample_img" class="left" /> ああああああああああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああああああああああ ああああ</p> </body> </html> /********************************************************/ どこか間違った記述がありましたらご教授頂ければ幸です。m(_ _)m 宜しくお願い申上げます。
- momora365
- お礼率78% (11/14)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#3です。補足です。 addListener(document.getElementById('sample_img'), 'click', changeSample, false); を呼び出していますが、そこに記述すると画面全体を読み込む前に関数を実行する為、オブジェクトがありません。というエラーになります。 addListenerを実行するのはonloadイベント時に実行する必要があります。 1さんのソースをそのまま利用し、scriptタグ内を修正するとするなら、以下のようになります。 <script type="text/javascript"> var changed = false; function changeSample(){ if(changed){ setElementClassById('sample_img','left'); }else{ setElementClassById('sample_img','right'); } changed= (changed)?false:true; } //class要素の追加・変更 function setElementClassById(elem, value) { if(document.getElementById) { var obj = document.getElementById(elem); if(obj) { obj.className = value; } } } function addListener(obj,eve,func,flg){ if(obj.attachEvent){ //IE用 obj.attachEvent("on" + eve, func); }else if(obj.addEventListener){ //W3C準拠ブラウザ用 obj.addEventListener(eve,func,flg); } } window.onload = function(){ addListener(document.getElementById('sample_img'), 'click', changeSample, false); } </script> 参考になれば幸いです。
その他の回答 (3)
- t_netbug
- ベストアンサー率34% (15/44)
先に書かれている通り、未定義関数があるのがエラーの原因です。 恐らくsetElementClass関数はsetElementClassById関数を呼び出したかったのではないかと思います。 また、addListenerという関数は存在しません。見落とされている部分に、恐らくこのような関数が定義されているハズです。 function addListener(obj,eve,func,flg){ if(obj.attachEvent){ //IE用 obj.attachEvent("on" + eve, func); }else if(obj.addEventListener){ //W3C準拠ブラウザ用 obj.addEventListener(eve,func,flg); } }
- UmJammer
- ベストアンサー率58% (115/196)
addListenerという関数が未定義なのがエラーの原因です。 適宜定義してやればよろしいかと思います。 それからFireFoxのエラーコンソールのような機能の利用をお奨めします。
お礼
ご回答ありがとうございます。 早速FirefoxアドオンのFirebugというエラーコンソールをインストールしてみました。 今回の件とは関係ないのですが ' の閉め忘れなどを指摘して貰って重宝しています。 ありがとうございました。m(_ _)m
- yambejp
- ベストアンサー率51% (3827/7415)
うーん、唐突に「addListener」とか「setElementClass」を 呼んでいますがこれは何を参照しているのでしょうか？ ご自身で定義している関数は「setElementClassById()」や 「changeSample()」ですよね？ 全般的に理解が浅いのが原因だと思います。
お礼
早々にご回答頂き感謝です。m(_ _)m 貼付けたソースは参考に挙げたサイトのソースをほぼそのままコピーしています。 >うーん、唐突に「addListener」とか「setElementClass」を >呼んでいますがこれは何を参照しているのでしょうか？ 確かに質問するレベルにも達していないようです。 もう少し自分で調べてみたいと思います。 ありがとうございました。
お礼
t_netbug様へ ご回答をお寄せ頂き感謝です。m(_ _)m addListenerで色々と検索していたました。 function addListener(obj,eve,func,flg){～～ 上記の記述と似たようなソースをWEB上で見つけて動かして見たのですがエラーがでてしまい、自分のレベルでは全く要領を得ずに諦めていました。 >addListenerを実行するのはonloadイベント時に実行する必要があります。 タイミングとかも有るのですね、ご指摘を受けるまでドコがエラーなのかも解らずにいたので本当に嬉しいです。ありがとうございました！ お作り頂いたソースで完璧に動いております。 お時間を割いてソースまでお作りましたこと、重ねて御礼申上げます。m(_ _)m