请你看一下this demo并告诉我为什么我无法动态设置.box
的高度?
$(function(){
$(window).load(function(){ // On load
$('.box').css({'height':(($(window).height()))+'px'});
});
$(window).resize(function(){ // On resize
$('.box').css({'height':(($(window).height()))+'px'});
});
});
<section>
<div class="col-md-12" id="box-1">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-2">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-3">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-4">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-5">Height has been set!</div>
</section>
答案 0 :(得分:0)
你指的是一个不存在的课程。 而不是$(“。box”),使用$(“[id ^ ='box-']”) - 你不是在寻找带有“box”类的那些,而是那些带有 id属性的人使用字符串'box - '。
(或者,您可以为要调整大小的每个元素添加一个“box”类,并保留原始jQuery选择器;也许这是一种更好的方法,它取决于您网站其余部分的逻辑。您决定。)
答案 1 :(得分:0)
首先,您使用了错误的选择器。您需要查询名为“col-md-12”的类。
然后,您正在使用从3.0中的JQuery中删除的window.load()
事件(请参阅here)。您可以使用$(document).ready(function() {})
或$(window).on("load",function(){})
您的代码应如下所示:
$(function(){
$(document).ready(function(){ // On load
$('.col-md-12').css({'height':(($(window).height()))+'px'});
});
$(window).resize(function(){ // On resize
$('.col-md-12').css({'height':(($(window).height()))+'px'});
});
});