javascript - 获取列的高度和宽度并在调整大小时更新

Question

我有这个 HTML:

<div class="columna1"> CONTENT1 </div>
<div class="columna2"> CONTENT2 </div>

还有这个 JavaScript:

column1_height = $('#columna1').height();
column1_width = $('#columna1').width();
column2_height = $('#columna2').height();
column2_width = $('#columna2').width();

但是当我调整屏幕大小时，值不会更新。

谢谢

Answer 1

试试这个:

$(document).on('ready', initFunction);
$(window).on('resize', getSizes);

var column1_height = 0;
var column1_width = 0;
var column2_height = 0;
var column2_width = 0;

function initFunction(){
    getSizes();
}

function getSizes(){
    column1_height = $('#columna1').height();
    column1_width = $('#columna1').width();
    column2_height = $('#columna2').height();
    column2_width = $('#columna2').width();

    console.log("Column 1: (Height: " +column1_height+ ") - (Width: " +column1_width+ ")");
    console.log("Column 2: (Height: " +column2_height+ ") - (Width: " +column2_width+ ")");
}

这应该有效