37159


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

[code]

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

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

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


CC BY-SA 3.0
2017-08-13T05:40:48.407
37151
2017-08-13T08:58:48.053
24854
question
javascript
on click処理について


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を最大サイズにするなら、このようにします。

[code]

    <!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>
    
[/code]


CC BY-SA 3.0
2017-08-13T08:51:26.593
37159
2017-08-13T08:58:48.053
2017-08-13T08:58:48.053
5436
5436
37151
answer