0

私は次の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の高さを取得します
  • 小さい方の高さを大きい方の値に設定します

これがフィドルの例です

4

4 に答える 4

2

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>
于 2013-02-13T15:54:02.713 に答える
0

jQueryを使用すると、次のコードをスクリプトタグ内に配置できます。

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

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

$(function() { ... }、ページが読み込まれた直後にコンテンツの実行を遅らせるために使用されます。

于 2013-02-13T15:56:51.677 に答える
0
<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>
于 2013-02-13T15:57:21.467 に答える
-1

純粋なJavaScriptでそれを行う方法はわかりませんが、これはjQueryでそれを行う方法の例です。

var heighta = $('#a').height();
var heightb= $('#b').height();
if(heighta>heightb)
{
   $('#b').height(heighta);
}
else
{   
    $('#a').height(heightb);
}
于 2013-02-13T15:53:27.860 に答える