使用 JQuery 设置框的高度

Question

我想改变一个id为#block2的盒子的高度，我会根据用户的浏览器来改变它window，如果window长度是1000px那么盒子的高度会为 1000px.

每次调整大小时我都会检查浏览器的大小window

var winHeight = $(window).height(),
    winWidth = $(window).width();

$(window).resize(function(){    
    $('#block2').css("height",winWidth + "px");
    console.log($('#block2').height())
});

如果有什么不对请指正..因为我写的代码在浏览器中不起作用

Answer 1

您可以使用 jquery 通过以下方式获取元素的高度：

$('#yourelementid').css('height');

也在 resize 事件中计算 windows 宽度和高度，然后尝试应用。

查看此演示：

$(document).ready(function() {


$(window).resize(function() {    
var winHeight = $(window).height();
var winWidth = $(window).width();
$('#block2').css("height", winWidth + "px");
     alert($('#block2').css('height'));
});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="block2" style"border:1px solid black">
<p>content</p>
</div>

Answer 2

var $win = $(window);

您可以使用

获取元素的高度和宽度

$win.height() 和 $win.width()

您可以通过

设置元素的高度

 $("#yourEelementID").height('Your value');

在你的情况下，

$win.on('resize',function(){
$("#block2").height($win.width());
console.log($('#block2').height());});

使用

检查当前元素高度

console.log($('#block2').height());

使用 JQuery 设置框的高度

set the height of a box with JQuery

css

jquery

height