javascript - 使两个元素具有相同的大小

Question

我希望 DOM 树中位于不同位置和不同“父级”的两个元素具有相同的高度和宽度，即使其中一个发生变化也是如此。

是否有支持所有浏览器(包括 IE 8)的解决方案？

编辑:如果有一个解决方案不能在 IE 8 上运行，我仍然想听听它，但它不会被接受为我正在寻找的解决方案。

澄清:我想要解决方案来处理尺寸变化的任何原因:窗口尺寸变化、内容尺寸变化等。

Answer 1

你可以使用 setInterval 来做你想做的事情。

var changeIndex = -1; // record element width or height is change or not

function setToSame() {
    if(changeIndex!=-1) {
        console.log("test");
    $('.same').height($('.same').eq(changeIndex).height());
    $('.same').width($('.same').eq(changeIndex).width());
        changeIndex = -1;
    }
}

// set your own function to change size, but reserve changeIndex setting
$('input').change(function() {
    $(this).parent().children('.same').css($(this).attr('id'), $(this).val() +'px');

    // set the changeIndex to the current change div
    changeIndex = $('.same').index($(this).parent().children('.same'));
    console.log(changeIndex);
});

setInterval(setToSame, 4);

参见 jsfiddle here .