[英]Not Able to Set Height Of Div Dynamically using jQuery
您能否看一下这个演示 ,让我知道为什么我不能动态设置.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>
您指的是不存在的课程。 代替$(“。box”),使用$(“ [id ^ ='box-']”)-您不是要查找具有“ box”类的对象,而是要查找具有id属性(以字符串开头)的对象'box-' 。
(或者,您可以为每个要调整大小的元素添加一个“ box”类,并保留原始的jQuery选择器;也许这是一种更好的方法,它取决于网站其余部分的逻辑。您可以决定。)
首先,您使用了错误的选择器。 您需要查询名为“ col-md-12”的类。
然后,您正在使用window.load()
事件,该事件已从3.0中的JQuery中删除(请参阅此处 )。 您可以使用$(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'});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.