0

最近、HTML5（特にゲーム）が大好きになり、最初にJavaScriptを強化する必要があることに気付いたので、Head First JavaScript（O'Reilly）を読んでクラックをしました。ナビゲーターのサイズに応じてサイズが変化するimgタグを表示するつもりでしたが、 ！DOCTYPE htmlを追加すると、imgのサイズを変更できません。簡略化したコードは次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" /> 
        <title>Pet</title>
        <link rel="stylesheet" href="style/rock.css">
        <script type="text/javascript">
            function resizeRock(){
                document.getElementById("rock").style.height = ( document.body.clientHeight - 100 ) * 0.9;
            }
        </script>
    </head>
    <body onload="resizeRock();">
        <div id="_rock">
            <img src="image/rock.png" alt="Rock" id="rock"/>
        </div>
    </body>
</html>

！DOCTYPE htmlを削除すると、すべてうまくいきますが、その理由を知りたいのですが、さらに、 HTML5でimgタグのサイズを変更する方法を知りたいのです。ありがとう！

4

2 に答える 2

2

を追加する<!DOCTYPE html>と、ドキュメントが標準モードになります。

これを機能させるには、いくつかの変更を加える必要があります。まず、標準モードでは、ページは必要なだけ高くなります。document.body.clientHeight画像の高さとわずかなマージンも同様です。ページの高さをビューポートの高さと一致させるには、デフォルトでクァークズモードで発生するように、次のCSSを追加します。

html, body { height:100% }

次に、標準モードでは、style.widthとstyle.heightを設定するときに使用している寸法を指定する必要があります。+ "px"これは、サイズ設定行の最後に追加するのと同じくらい簡単です。

document.getElementById("rock").style.height = 
                                    ( document.body.clientHeight - 100 ) * 0.9 + "px";
于 2012-05-20T11:50:51.967 に答える
0

ほとんどの<img>場合、インラインCSS要素であり、そのような要素の高さを設定することはできません。

追加：

 #rock {
       display: block;
 }

スタイルシートで。

Moer情報

于 2012-05-20T09:28:30.797 に答える