javascript - 页面加载后如何使用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，您可以将此代码放在脚本标签中：

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