2

以下のようなクリックしたら、
背景色が変わるスクリプトを記載したのですが動きません。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body onclick="Clicked()">
    <script>
      <!-- 
      function Clicked() {
        document.bgColor = "Gray";
      }
      // -->
    </script>
  </body>
</html>

色々試行錯誤をした結果1行目を削除すれば、
動いたのですが原因がよく分かりませんでした。

単純にHTML5で作成されているものを表すタグだと思いますが、
何が問題なのでしょうか?

1
  • 1
    body要素の中に表示対象のコンテンツがないため、高さが0になっているせいだと思われます。適当な文字列か何かを追加して確かめて見てください。<!doctype html>を削除することで、 一部のブラウザ ではbody要素が画面いっぱいに広がるのは確認できましたが、その挙動の違いの典拠になるドキュメント等を見つけることができなかったので、コメントにさせていただきます。とりあえずコンテンツの有無に関わらずbodyを画面いっぱいに広がらせたい場合には、適切なCSSを指定してください。
    – OOPer
    2017年8月13日 6:04

1 件の回答 1

5

stack overflowの英語版に回答がありました。

https://stackoverflow.com/questions/32214152/why-does-my-div-height-100-work-only-when-doctype-is-removed

どうやら、doctypeを宣言しないとquirks modeでレンダリングされるらしいです。
それによると、quirks modeではビューポートを起点にして高さが設定されるので、ブラウザのサイズがそのままhtmlのサイズになるっぽいです。

一方 doctypeを宣言した方は親要素htmlタグやbodyタグがautoなので、これは子要素の高さに依存するとあります。

bodyを最大サイズにするなら、このようにします。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
      html,body { height: 100%; }
    </style>
  </head>
  <body onclick="Clicked()">
    <script>
      <!--
        function Clicked() {
          document.bgColor = "Gray";
        }
      // -->    
    </script>
  </body>
</html>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。