- 締切済み
class名で選択できるようにしたいですが。。。
次はclass名がalarmのリンクをクリックしたとき「Alarm!」という警告が開くように意図したものですが。。。 <!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=shift_jis" /> <title>無題ドキュメント</title> <script type="text/javascript"> var funcs = document.getElementsByTagName("*"); for (var i=0;i<funcs.length;i++){ if(funcs[i].className=="alarm"){ function alarm() { alert ("Alarm!"); } } } </script> </head> <body> <a href="#" class="alarm" onclick="alarm()">click</a> </body> </html> 考えどおり動けないですね。どこが悪いのでしょうか。 忙しいお時間で申し訳ございませんが、ご意見のほどよろしくお願いいたします。
- wis1674
- お礼率100% (4/4)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
#No.1です。やたらに、ついかします <a href="#" class="alarm" onclick="alarm()">click</a> は、 <a href="#" class="alarm">click</a> に。 でも、こんなかきかたは、いろいろもんだいがありそうなので もうやめましょう。 var funcs = document.getElementsByTagName("*"); が、じっこうされるとき、まだbodyぶぶんは、よみこまれていません なので <script type="text/javascript"> //ここにいろいろ </script> </body> のようにするとwindow.onloadが、ふようになります。 </body>のちょくぜんにおく。 クラスのしていは、ふくすうしていできます。 なので、１つだけはんていするのは、びみょう。 class="abc def aaa bbb alarm ccc" なら、できない。なので if (/\balarm\b/.test(funcs[i].className)) funcs[i].onclick = ... とか。 for (var i=0;i<funcs.length;i++){ のlengthは、まいかいよびだすより for (var i=0, I = focus.length;i<I;i++){ とか。 それよりも for (var i=0, o; o = focus[i++];){ とか。 というよりも、それぞれのくらすをしらべて、たくさんいべんとを はりつけるよりも documentに、ひとつだけいべんとをはりつけて、そこからしらべると かんたんかもよ！ //@cc_on document./*@if (1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 'click', alarm, false); function alarm(evt) { var e = evt./*@if(1) srcElement @else*/ target /*@end@*/; if (/\balarm\b/.test(e.className)) alert ("Alarm!"); }
- x_jouet_x
- ベストアンサー率68% (162/236)
JavaScriptは以下のように記述、 ---------- <script type="text/javascript"> window.onload = function() { var funcs = document.getElementsByTagName("a"); for (var i=0;i<funcs.length;i++) { if(funcs[i].className == "alarm") { funcs[i].onclick = alarm; } } }; function alarm() { alert ("Alarm!"); } </script> ---------- HTMLで<a href="#" class="alarm" onclick="alarm()">click</a>としているところを<a href="#" class="alarm">click</a>にする。 こんな感じでしょうか？
お礼
お忙しいところ、ありがとうございます！ うまくできました！
- yuu_x
- ベストアンサー率52% (106/202)
head 読み込み時点では、body はまだ読み込まれていないため、funcs にはスクリプトより前の要素しか含まれていないことが原因です。 全ての要素に、イベントリスナをくっつけて周る（提示コードではリスナ登録してないですね。これも原因か。）のは非効率的です。 クリックイベントはバブリングする（上位要素でイベントが拾える）ので、なるべく利用するようにしましょう。 下のコードはどこでも好きなところに置いてください。 ================================================================= //@cc_on ----------------------------------------------------------------- バージョンチェック（省略） ----------------------------------------------------------------- var WIDGET = { escapeRegExp : function( str ) { return str.replace ( /([.?*+\-^$\\|!=\(\)\[\]{}])/g, '\\$1' ); }, hasClassName : function( n, className ) { return n ? RegExp( '(?:^|\\s)' + this.escapeRegExp( className ) + '(?:\\s|$)' ).test( n.className ) : false; } } ----------------------------------------------------------------- function clickHandler( evt ) { var target = evt./*@if(1) srcElement @else@*/ target /*@end@*/; switch( true ) { case WIDGET.hasClassName( target, 'alarm' ) : alarm( target ); break; defalut : break; } } document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', clickHandler, false ); ----------------------------------------------------------------- function alarm( n ) { if( /*@if(1) /A/i.test( n.tagName ) @else@*/ n instanceof HTMLAnchorElement /*@end@*/ ) { alert ("Alarm!"); } } ================================================================= # 全角スペースでインデントが入れてあるので、半角などに変換してください。
お礼
これは勉強するしかないですね！ 予想外の高級技術を教えてくださってありがとうございます！ 勉強します！
- babu_baboo
- ベストアンサー率51% (268/525)
window.onload = function () { var funcs = document.getElementsByTagName("*"); for (var i=0;i<funcs.length;i++){ if(funcs[i].className == "alarm") funcs[i].onclick = alerm; } } function alarm() { alert ("Alarm!"); } かな？
お礼
これもうまくできました！ まことにありがとうございます！ 勉強します！
関連するQ&A
- コールバック関数が上手くいかないです
こんにちは。 ブラウザ上に70と表示させるため、以下のソースを書きましたがうまくいきません。 <!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=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript"> //<![CDATA[ function funcA(a) { alert(a + 10); } function funcB(b, func) { var x = b + 2; func(x); } function funcC(c){ var body = document.body; body.innerHTML = c * 10; } funcB(5,funcC); //]]> </script> </head> <body> </body> </html> どなたか詳しい方、ご教示お願いいたします。
- ベストアンサー
- JavaScript
- JavascriptでObjectからJSON形式変換するにはどうすればいいでしょうか？
toSourceだと少し違うし、どうすればいいのでしょうか。簡単に変換できる関数でもあればいいのですが、わかりませんでした。 どなたかご教授お願いします。 <!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=utf-8" /> <title>objctからJSONに変換</title> <script type="text/javascript"> obj = new Object(); obj.test = "txt"; str = obj.toSource(); document.write(str); //--> </script> </head> <body> </body> </html>
- ベストアンサー
- JavaScript
- 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 宜しくお願い申上げます。
- ベストアンサー
- JavaScript
- DOCTYPE宣言とdocument.body.clientHeight
お世話になります。 ブラウザのサイズを取得するにはどうすればよいのでしょうか？ document.body.clientHeightで取得出来るのは分かりましたが DTDにより動作したり、しなくなるのも分かりました。 ×動作しない <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ○動作する <?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"> 後者のものですとIEでは動作しますが、firefoxでは動作しません。 何か対処法は、御座いませんでしょうか？ 一番望む形は <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> の宣言で、ブラウザサイズが取れるようになるのがベストです。 CSSを使用しているので<?xml version="1.0" encoding="UTF-8"?>を入れると 表示モードが互換になるので・・・。 対応したいブラウザはIE6.0、firefox,Safariです。 一応ソース <?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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> function init(){ var bodyHeight = document.body.clientHeight; alert(bodyHeight); } </script> </head> <body onload="init();"> <div> ほげ </div> </body> </html>
- ベストアンサー
- JavaScript
- ｊｓ プログラムの意味
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" /> <title>サンプル</title> </head> <body> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script> var methods = ['onMouse', 'onClick', 'onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel']; var text = this; function and(method, text) { return function() { return method.apply(text, arguments); }; } for (var i = 0, l = methods.length; i < l; i++) { text[methods[i]] = and(text[methods[i]], text); console.dir(text); console.log(text); } </script> </body> </html> console.dirとconsole.logで中身を見てみるも何をしてるのかわからなくて... 推測でも構わないので何かあればお願いします。説明不足でスミマセンm(__)m
- ベストアンサー
- JavaScript
- ｊｓ array -1
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" /> <title>サンプル</title> </head> <body> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script src="fastclick.js"></script> <script> function print(str){ document.write(str + "<br />"); } document.write("<p>"); var ary = new Array("東京", "大阪", "名古屋"); for (var i = 0 ; i < ary.length ; i++){ print("array[" + i + "] = " + ary[i]); } document.write("</p>"); document.write("<p>"); try{ var ary2 = new Array(-1); }catch(e){ print(e); } document.write("</p>");</script> </body> </html> ３０行目ｔｒｙ文の中の「 var ary2 = new Array(-1); 」なのですがnewで初期化をしているという事は何となく理解できるのですが 引数で-1を指定しているのですが-1を指定する意味は何かあるのでしょうか？
- ベストアンサー
- JavaScript
- Xhtmlでの、class="imgover"の記述方法を教えてください。
ただいま 独学ですが、Xhtmlを勉強しております。 Xhtmlで、カーソルが画像の上に来たら 画像が変わるように設定したいのですが、その方法が class="imgover" を使うと出来るとわかりやってみましたが・・・うまくできません。 下記にXhtmlを記述したので、教えてくださいお願いします。 <?xml version="1.0" encoding="Shift_JIS"?> <!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=Shift_JIS" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <title>あれこれ</title> <meta name="description" content="あれこれ" /> <meta name="keywords" content="あれこれ" /> <meta name="copyright" content="あれこれ" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <script type="text/javascript" src="js/rollover.js"></script> </head> <body> <img src="img/header_logo.gif" width="312" height="39" alt="日本" class="imgover" /> </body> </html> 画像は、 header_logo.gifと header_logo_on.gif とが作ってあります。 どこかおかしいのでしょうか?
- ベストアンサー
- HTML
- XHTML のタイトルが表示されません ご教授おね
タイトル通りなのですがHTML のタイトルが上手く表示されず、本文の中に入ってしまっています。（cf,添付画像） 一番最初の所で躓いてしまいました、解説書の通り何度もやり直したのですが、原因が分からないのです・・・かなり初歩的なこととは思われますがよろしくお願いいたします！ ソースは以下のとおりです。 <!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=utf-8" /> <titile>a</title> <style type="text/css"> </style> </head> <body> </body> </html> ＊ちなみにサンプルでは以下のとおりになっています。（サンプルをインストールすればしっかりと表示されるのです、同じなはずなのに僕が入力しますと上手くいきません） <!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=utf-8" /> <title>a</title> <style type="text/css"> </style> </head> <body> </body> </html>
- ベストアンサー
- CSS
- XHTMLとJavascript・CSSで表示位置の固定方法について
HTMLからXHTMLへソースをそのままで移行したら位置の固定がされなくなりました。 <div id="msg">message</div>の部分をスクロールしても常に同じ場所に表示したいです。 XHTMLの知識が殆どなく、原因が判りません。 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" 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" /> <script type="text/javascript"> var offX = 0; var offY = 0; function setMenu(){ if(document.all){ var mx = parseInt(document.body.scrollLeft+offX); var my = parseInt(document.body.scrollTop+offY); } else { var mx = parseInt(self.pageXOffset+offX); var my = parseInt(self.pageYOffset+offY); } if(document.getElementById){ document.getElementById('msg').style.left=mx; document.getElementById('msg').style.top=my; }else if(document.all){ document.all('msg').style.pixelLeft=mx; document.all('msg').style.pixelTop=my; }else if(document.layers){ document.layers['msg'].moveTo(mx,my); } } onscroll = setMenu; onresize=setMenu; //--> </script></head> <body bgcolor="#111144"> <div id="msg"> message </div> </body> </html>
- ベストアンサー
- JavaScript
- ｊｓ プロトタイプ
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" /> <title>サンプル</title> </head> <body> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script src="fastclick.js"></script> <script> function print(str){ document.write(str + "<br />"); } function Car(manufact, name){ this.manufact = manufact; this.name = name; } Car.prototype.info = function(){return this.manufact + " " + this.name;}; document.write("<p>"); var car1 = new Car("Toyota", "PRIUS"); print(car1.info()); var car2 = new Car("Honda", "INSIGHT"); print(car2.info()); document.write("</p>"); </script> </body> </html> 23行目なのですが「 Car.prototype.info 」とありますがｊｓにおいてプロトタイプはオブジェクトだという事は認識しておりますがプロトタイプを宣言する意味は何があるのでしょうか？ 参考urlです。 http://www.ajaxtower.jp/js/function_class/index3.html
- ベストアンサー
- JavaScript
お礼
ああ、なるほど すごく分かりやすいですね！ 一つ一つやさしく説明してくださって、改めてありがとうございます！ これも勉強しなきゃですね。。。