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。

Answer 2

您可以使用jQuery获得适用于IE8的解决方案。

假设您想要具有相同高度和宽度的两个元素是

<div id="fir">

</div>

<div id="sec">

</div>

现在只指定一个元素的高度和宽度，

#fir{
    height: 50px;
    width: 100px;
}

CSS中没有用于检测高度或宽度变化的预定义方法，但您可以使用jQuery实现结果，

$(document).ready(function(){

    $('#fir').bind('heightChange', function(){
        var h = $("#fir").height();
        $("#sec").height(h);
    });

    $('#fir').bind('widthChange', function(){
        var w = $("#fir").width();
        $("#sec").width(w);
    });

    $('#sec').bind('heightChange', function(){
        var h = $("#sec").height();
        $("#fir").height(h);
    });

    $('#sec').bind('widthChange', function(){
        var w = $("#sec").width();
        $("#fir").width(w);
    });

});

这将检测两个元素的高度和宽度变化，同样设置其他元素的高度和宽度。

要检查上述代码是否正常工作，您可以创建一个测试脚本，通过创建按钮来更改元素宽度id="fir"，

<button id="btn">Change width</button>

现在包含以下功能，

$("#btn").click(function() {
    $("#fir").css('width', '400px');
    $("#fir").trigger('widthChange'); 
});

Here is the fiddle for it

Answer 3

<html>
    <head>
        <style>
            div{}
            #A{background: red}
            #B{background: blue}
        </style>

        <script>
            mBlockChange = false; //Required for IE9-

            function equalSize(f, t){
                mBlockChange = true;

                f = (f || document.getElementById('A'));
                t = (t || document.getElementById('B'));

                //We take the larger dimension of both since it is better than clipping.
                //Change on your demands.

                t.style.height = '';
                t.style.width = '';
                f.style.height = '';
                f.style.width = '';

                t.style.height = Math.max(f.offsetHeight, t.offsetHeight).toString() + 'px';
                t.style.width = Math.max(f.offsetWidth, t.offsetWidth).toString() + 'px';

                f.style.height = Math.max(f.offsetHeight, t.offsetHeight).toString() + 'px';
                f.style.width = Math.max(f.offsetWidth, t.offsetWidth).toString() + 'px';

                setTimeout(function(){mBlockChange = false}, 100);
            }

            //This one for IE9+, FFox, Chrome and Safari
            //http://help.dottoro.com/ljrmcldi.php
            function bindEvents(){
                var tA = document.getElementById('A');
                var tB = document.getElementById('B');

                //The addEventListener() method is not supported in Internet Explorer 8 and earlier versions with resize.
                //Resizing the body
                document.body.onresize = function(){
                    //We only do this once the resizing is actually finished.
                    if (this.Timer) clearTimeout(this.Timer);
                    this.Timer = setTimeout(function(){
                        //console.log('Resize', this);
                        equalSize()
                    }, 300)
                };

                //If supported, we listen on dom changes.
                if ('MutationEvent' in window){
                    document.addEventListener('DOMSubtreeModified', function(){
                        if (document.Timer) clearInterval(document.Timer);
                        //console.log('DOMSubtreeModified', this);
                        if (!mBlockChange) equalSize()
                    }, false);
                }
                //We set an interval for browsers which do not support DOMSubtreeModified
                //If you do not want to rely on ('MutationEvent' in window) put it out of else and cancel the timer (scenario B)
                //Can not bind parameters to setInterval in IE8- :s
                else{
                    document.Timer = setInterval(function(){
                        //console.log('Interval', 'Document');
                        equalSize()
                    }, 1000);
                }
            }
        </script>
    </head>

    <body onload = 'bindEvents()'>
        <div id = 'A'><p contenteditable = 'true'>A</p></div>
        <div id = 'B'><p contenteditable = 'true'>B</p></div>
    </body>
</html>

https://jsfiddle.net/5cn7maqe/

然而，你的元素高度和宽度不应该神奇地改变，它总是需要一些交互，比如用ajax改变dom，用contenteditable改变输入或调整窗口大小。你最好只需手动调整它就可以了。

编辑：做了一些小改动。 https://jsfiddle.net/5cn7maqe/1/

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

3 个答案: