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

时间:2016-03-17 18:25:58

标签: javascript jquery css

我有这个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();

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

由于

1 个答案:

答案 0 :(得分:3)

试试这个:

$(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+ ")");
}

这应该有效