我想要实现的是获取浏览器的视口(viewport)高度并将其添加到CSS的多个类中。到目前为止,我有这个:

获取视口(viewport)高度:

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 "});

样品:

如果有人可以在此处提供一些有效的代码,那将是非常不错的。我的编码能力非常有限。

最佳答案

您的代码对我来说是正确的,除了您必须在字符串文字之外进行数学运算,并且由于您使用的是类,因此需要一个类选择器(例如".divOne",而不是“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事件,但是如果您控制脚本标记的位置,则不需要这样做。)

这是添加高度等的示例:Live Copy | Live Source
<!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>

关于javascript - 视口(viewport)高度和.css(),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16508230/

10-09 23:39
查看更多