- ベストアンサー
bodyタグの範囲について
- HTMLとJavaScirptで下記のコードを書いた場合、<body>タグが担当する範囲はテキストボックスのみ(余白を含まない)です。
- 関数foo()はテキストボックス内をクリックした場合にのみ実行されます。
- しかし、<body>タグにbgcolor属性を追加すると、余白全体が着色されることがあります。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
文法上は1.でも2.でもないと思います。（詳しくは最後に） <body onClick="foo()" style=" margin: 200px; background-color:blue; border:10px solid red; "> 画面全体が青くなるのに、ボーダーが書かれるのは<input>のある行だけ。 IE、Webkit、Operaはborder（border上含む）の内部でonclickが発生、 Geckoのみbodyのマージン部分（inputの上）やウインドウ全体で発生。 さらに、<html>の背景色を入れてみると（デフォルトのtransparentから変更） <html style="background-color:white;"> <body onClick="foo()" style="margin:200px; background-color:blue; border:10px solid red;"> bodyのbackground-colorの範囲がborderと一致します。 ですので、 HTML/CSSは上記全てのブラウザが1.で実装、 JavaScript（イベント発生範囲）のみ、Geckoは2.で実装、それ以外は1.で実装していると思います。 （あくまで「実装」を確認しただけであって、「文法」は確認していません。 最初に書いた1.でも2.でもない、の件ですが、margin:0とするなら1.だと思いますが、 ・要素の範囲はmarginとその内部 ・backgroundの範囲はborderの内部（borderを含めない） ・onclick（イベントを発生させる範囲）はborderとその内部 と思います。 <div>や<p>と同様に扱うのであれば、ですが、<body>だけ特別扱いするのかどうかはわかりません。 一応、要素の範囲について。。。 私にとっては文法はあまり重要でない（ブラウザを作ってるわけではないので、『実装』の方が重要）ので、詳しく読んでいません。 ですので、私の解釈が間違っている可能性もあります。（むしろその可能性の方が高いと思います） http://www.w3.org/TR/CSS21/visuren.html http://msdn.microsoft.com/ja-jp/library/bb250395(VS.85).aspx <html>の背景色を指定しないときに、<body>の背景色をウインドウ全体に塗るのは違うような気がしますが、、、 昔はこれを付けないと背景がウインドウ全体にならなかった気がしますが、記憶違いかな。。。 <style> html,body { height:100% } </style>
その他の回答 (3)
- yyr446
- ベストアンサー率65% (870/1330)
bodyの範囲は、<body></body>の内部です。 <input>で発生したクリックイベントは、親要素に向かって伝わって いきます。（イベントバブリングと呼ばれる） body onClick="foo()"としてあるので、クリックイベントのバブリングが body要素に達した時、foo()が実行されます。 ↓で試しましょう。inputボックスより下の余白は、クリックしても反応しませんよね！。 背景色とは無関係です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML 5 complete</title> <style type="text/css"> body {background-color:#ccccff;} </style> <script type="text/javascript"> <!-- function foo(event){ var target = event.target || event.srcElement; alert (target.nodeName); } // --> </script> </head> <body onClick="foo(event);"> <input type="text"> </body> </html>
お礼
ありがとうございます。 背景色とは無関係との事ですが、ならばなぜonClick()で反応しない範囲にも着色がされるのでしょうか。 同じbodyタグの属性なので、着色範囲とonClickの反応する範囲は同じである気がするのです。
- suzuko
- ベストアンサー率38% (1112/2922)
２でしょう。
お礼
ありがとうございます。 できれば理由も教えていただけると助かります。
- t_ohta
- ベストアンサー率38% (5253/13739)
答えは 2 です。 bodyタグにbgcolorをつけて着色される範囲がbodyタグの範囲です。 例示されているhtmlをFirefoxで実行するとウインドウ内の何処をクリックしてもダイアログが表示されます。
お礼
ありがとうございます。 ブラウザによって変わる、との事でよいでしょうか。
お礼
ありがとうございます。 backgroundとonclickでは微妙に範囲が違うのですね。 勉強になりました。