2

私が達成しようとしているのは、ブラウザーのビューポートの高さを取得し、それを CSS のいくつかのクラスに追加することです。これまでのところ、私はこれを持っています：

ビューポートの高さを取得:

var width = $(window).width();
var height = $(window).height();

cssに追加

$('divOne').css({"height": " *viewport height* "});
$('divTwo').css({"top": " *viewport height* "});
$('divThree').css({"top": " *viewport height* + 200px"});
$('divTwo').css({"top": " *viewport height* + 400px "});

サンプル：

サンプル

誰かがここで実用的なコードを提供できれば、本当に素晴らしいことです。私のコーディングスキルは非常に限られています。

4

4 に答える 4

2

あなたのコードは、文字列リテラルの外側で計算を行う必要があることを除いて、私にとってはほぼ正しいように見えます".divOne"。

var width = $(window).width();
var height = $(window).height();
$('.divOne').css({"height": height + "px"});
$('.divTwo').css({"top": height + "px"});
$('.divThree').css({"top": (height + 200) + "px"});
$('.divTwo').css({"top": (height + 400) + "px"});

おそらく、div に 2 から 4 の高さを与えたいと思うでしょう。また、コードの実行時に div が存在するように、div で動作するスクリプトがマークアップの div の後にあることを確認する必要があります。(または jQuery のreadyイベントを使用しますが、スクリプト タグの場所を制御する場合はその必要はありません。)

高さなどを追加する例を次に示します。ライブソース

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Div Height And Such</title>
</head>
<body>
  <div class="divOne">divOne</div>
  <div class="divTwo">divTwo</div>
  <div class="divThree">divThree</div>
  <div class="divFour">divFour</div>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script>
  var width = $(window).width();
  var height = $(window).height();
  $('.divOne').css({"height": height + "px"});
  $('.divTwo').css({
    "top": height + "px",
    "height": "200px"
  });
  $('.divThree').css({
    "top": (height + 200) + "px",
    "height": "200px"
  });
  $('.divTwo').css({
    "top": (height + 400) + "px",
    "height": "200px"
  });
  </script>
</body>
</html>
于 2013-05-12T14:12:58.697 に答える
1 
 $('.divOne').css({
     "height": $(window).height()
 })

それを試してみてください... を覚えておいてください。divOne前

于 2013-05-12T14:13:21.173 に答える
1

それはあなたが求めているものですか？

var height = $(window).height();
$('.divOne').css({"height": height+"px"});
$('.divTwo').css({"height":  height+"px"});
$('.divTwo').css({"top":  height+"px"});
$('.divThree').css({"top": height+200});
$('.divTwo').css({"top":  height + 400});
于 2013-05-12T14:15:46.580 に答える