0

ヘッダーにjavascript関数を含めずにdivonloadのサイズを変更しようとしています。これまでのところ、私のコードは以下のコードのように見えます。私はjavascriptにある程度精通していますが、非常に初心者です。

私がやりたいのは、スタイルシートで高さが100％に設定されているdivを取得し、ロード時に60pxの高さを差し引くことです。私も近くにいますか、それとも私は迷子になっていますか？

編集：私はこれを行う他の方法に反対しません。私は他の方法を知りません。

<div id="pageContent" onload="document.this.style.height = clientHeight - '60px';">
4

5 に答える 5

5

ウィンドウの高さを検出するとブラウザー間の互換性の問題が発生しやすいため、jQueryを使用しました。マークアップ、cssスタイル、およびJavaScript機能を明確に分離しておくことをお勧めします。

これは、あなたが達成しようとしていると私が信じていることのコード化された例です：

http://jsfiddle.net/AKmaB/2/

以前にjQueryを使用したことがない場合は、Webページソース内の他のJavaScriptの前にこれを含めるようにしてください。

jQueryの包含

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
于 2012-05-08T02:37:43.690 に答える
1

まず、HTML 4.01、XHTML 1.0 DTD、およびHTML5onload仕様では、要素の属性イベントが定義されていないため、定義するdivことはお勧めできません。

コードを機能させるには、変更しようとしている要素がDOMにロードされた後にコードを実行する必要があります。これを実現する方法はいくつかあります。たとえば、div宣言の後で次のようになります。

<div id="pageContent"></div>
<script>document.getElementById('pageContent').style.height = 
        (self.innerHeight ? self.innerHeight :
         document.documentElement.clientHeight ? document.documentElement.clienteHeight :
        document.body.clientHeight) - 60 + "px";</script>

</body>またはタグの直前。

<script>document.getElementById('pageContent').style.height = 
        (self.innerHeight ? self.innerHeight :
         document.documentElement.clientHeight ? document.documentElement.clienteHeight :
        document.body.clientHeight) - 60 + "px";</script>
</body>
于 2012-05-08T03:07:34.517 に答える
1

あなたはおそらくこのようなものが欲しいです：

this.style.height = (document.body.clientHeight - 60) + "px";

編集：

言及するのを忘れて、DIV要素にonloadを実行することはできず、本体にのみ実行できます。したがって、JavaScriptをそのように実行することを主張する場合は、この方法で実行できます...

<html>
<head></head>
<body style="height:100%; background:blue;" onload="document.getElementById('pageContent').style.height = (document.body.clientHeight - 60) + 'px';">
<div style="background:green;" id="pageContent">FOO</div>
</div>
</body>
</html>

要約する：

  • 何もオンロードできませんが、本文を参照してください：div要素にオンロードイベントを追加する方法は？
  • document.bodyからclientHeightを取得します。これはグローバルプロパティではありません。
  • onclickのようなものを使用していた場合は、「this」を使用してターゲットオブジェクトを参照できますが、document.thisを使用した方法では参照できません。それは無効です。
于 2012-05-08T02:26:19.127 に答える
0

jsFiddleの例

<body onload="document.getElementById('pageContent').style.height = 
              parseFloat(document.body.scrollHeight)-60 + 'px';">
<div id="pageContent"></div>
  1. divonload属性がありません（使用する必要がありますbody）
  2. これが機能する場合でも、後で本体が他のもので埋められる可能性があるため、これをdomreadyとウィンドウサイズ変更イベントに適用するのが最善です。
  3. あなたの代わりに使用しclientHeightたいかもしれませんscrollHeightbody
于 2012-05-08T02:58:48.947 に答える
0

次のようなものを試してください。

<div id="pageContent" onload="this.style.height = (document.body.clientHeight-60)+'px'">

私はそれがうまくいくはずだと信じています。

于 2012-05-08T02:25:24.400 に答える