我想要实现的是获取浏览器的视口(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/