页面加载后，如何使用javascript检查和修改两个DIV的高度？

Question

我有以下HTML：

<div>
    <div id="a" class="grid_6" style="background-color: #ff00ff">
        <div class="block-border">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
    </div>
    <div id="b" class="grid_6" style="background-color: #ffff00">
        <div class="block-border">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
    </div>
</div>

和CSS：

.grid_6 {
    width: 200px;
    display:inline;
    float: left;
    margin-left: 0.99%;
    margin-right: 0.99%;
}

页面加载到以下位置后，如何使用javascript：

• 获取ID为“ a”和“ b”的DIV的高度
• 将两者中的较小者的高度设置为较大者的值

这是一个小提琴的例子

Answer 1

这是如何在没有任何jQuery的纯JavaScript中做到这一点

<script type="text/javascript">
    window.document.onload = function(e){
        var aheight = document.getElementById("a").offsetHeight;
        var bheight = document.getElementById("b").offsetHeight;
        if(aheight > bheight) {
            document.getElementById("b").offsetHeight = aheight;
        }else {
            document.getElementById("a").offsetHeight = bheight;
         }
    }
</script>

Answer 2

使用jQuery，您可以将此代码放置在script标签内：

$(function() {
    var divAHeight = $("#a").height();
    var divBHeight = $("#b").height();

    if (divAHeight > divBHeight)
        $("#b").height(divAHeight);
    else
        $("#a").height(divBHeight);
});

$(function() { ... }用于在页面加载后立即延迟内容的执行。

Answer 3

<script type=text/javascript>
  window.document.onload = function () {
    var divA = document.getElementById('a');
    var divB = document.getElementById('b');

    if (divA.offsetHeight > divB.offsetHeight) {
      divA.offsetHeight = divB.offsetHeight;
    } else {
      divB.offsetHeight = divA.offsetHeight;
    }
  }
</script>

Answer 4

我不确定如何使用纯JavaScript来做到这一点，但这是如何使用jQuery的一个例子。

var heighta = $('#a').height();
var heightb= $('#b').height();
if(heighta>heightb)
{
   $('#b').height(heighta);
}
else
{   
    $('#a').height(heightb);
}