私は2つの部門を持っています。div 1 は長くなる可能性があるため、つまり無限スクロール div であるため、javascript を使用して div 2 を div 1 と同じ高さにしたいと考えています。以下のコードを使用しようとしましたが、機能しません。なんで？
JavaScript:
<script type="text/javascript">
document.getElementById("div2").setAttribute("height",document.getElementById("div1").clientHeight);
</script>
私のdiv:
#div1 {
width: 700px;
background: #FFF;
overflow: hidden;
float: left;
}
#div2 {
width: 300px;
background-image: url(../images/user_panel.png);
background-repeat:repeat-y;
}
このsetAttribute関数は、HTML 要素に新しい属性を追加する DOM 関数です。heightdivに を追加しようとしています。それは効果があります：
<div id="div2" height="...">...</div>
heightしかし、HTML はそのようなHTML 要素の属性を定義していません。
あなたが探しているのは、DOM 要素のスタイルを設定することです。それがstyleDOM 要素のプロパティになります。内部には、設定する必要styleがあるheightプロパティがあります。
document.getElementById("div2").style.height = document.getElementById("div1").clientHeight + "px";
上記のコード サンプルでは、 のパディングについても考えることができdiv1ます (おそらく計算に取り込まれます)。これはclientHeight、パディングが含まれているが含まれてstyle.heightいないためです。
これでうまくいくはずです：
document.getElementById("div2").style.height=document.getElementById("div1").clientHeight+'px';