bodyタグの範囲について

解決済

質問者：ryu-e
質問日時：2010/10/04 10:20
回答数：4件

bodyタグの範囲について

質問させてください。

HTMLとJavaScirptで下記のようなソースを書きました。

～ここから～

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<script language="JavaScript">
function foo(){

}
</script>
</head>
<body onClick="foo()">
<input type="text">
</body>
</html>

～ここまで～

この場合、ウィンドウの中で<BODY>タグが担当する範囲は以下のどちらでしょうか？

1. テキストボックスのみ(余白を含まない)
2. 余白を含んだウィンドウ全体

私としては、関数foo()が実行されるのはテキストボックス内をクリックした場合だけなので、1.だと思います。
しかし、<body>タグの属性のbgcolorをつけると、余白全てが着色されるので、2.なのかもしれないと思い混乱しています。

どなたかお知恵をお貸しください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： taloo
回答日時：2010/10/04 16:27

文法上は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 …

<html>の背景色を指定しないときに、<body>の背景色をウインドウ全体に塗るのは違うような気がしますが、、、
昔はこれを付けないと背景がウインドウ全体にならなかった気がしますが、記憶違いかな。。。
<style> html,body { height:100% } </style>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
backgroundとonclickでは微妙に範囲が違うのですね。
勉強になりました。

通報する

お礼日時：2010/10/04 17:24

No.3

回答者： yyr446
回答日時：2010/10/04 11:25

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">

</script>
</head>
<body onClick="foo(event);">
<input type="text">
</body>
</html>