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”
将较小者的高度设置为较大者的高度

这是example fiddle

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

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

4 个答案: