1

こんにちは、JavaScript を使用して部門の高さを動的に変更しようとしていますが、HTML マークアップ内のスタイル タグを使用して定義されている場合にのみ、JS に div の Height 要素を読み取らせることができます。

別のシートで NaN を返す場合、値を見つけることができず、実際に null を返すためだと思います (ParseInt を使用して動作させています)。

HTMLは次のとおりです。

<div id="dropdown_container">
    <div id="dropdown" style="height:100px;">
    a
    </div>
</div>

(HTML スタイルのマークアップを希望)

そして、ここにJSがあります：

function clickDown() {
    var el = document.getElementById('dropdown');
    var maxHeight = 200;
    getHeight = parseInt(el.style.height.substring(0,(el.style.height.length)-2));
    console.log(getHeight);
    getHeight += 2;
    el.style.height = getHeight + 'px';
    timeoutHeightInc = setTimeout('clickDown()',15);
    if(getHeight >= maxHeight){
        clearTimeout(timeoutHeightInc);

    }
}

この（ミス？）機能の理由を知っている人はいますか。そしてそれに対する解決策は？

ここにjsFiddleがあります。

高さを CSS に移動して、私が抱えている問題を確認してください。

4

1 に答える 1

1

ParseInt に基数がありません。

あなたは言う：

HTMLマークアップ内のスタイルタグを使用して定義されている場合、JSにdivのHeight要素を読み取ることしかできません

これで、div の属性スタイルのみを読み取っています。インラインで設定したもの。したがって、それを削除すると、もう読むことができなくなります。わかる？

計算された高さを取得します。試す：.offsetHeight

incで遊ぶテストケースの基礎。固定基数。このフィドル

更新: 多田: 修正済み、この更新されたフィドルを参照してください

function clickDown() {
    var el = document.getElementById('dropdown');
    var maxHeight = 200;
    getHeight = parseInt(el.offsetHeight,10);
    console.log(getHeight);
    getHeight += 2;
    el.style.height = getHeight + 'px';
    timeoutHeightInc = setTimeout('clickDown()',15);
    if(getHeight >= maxHeight){
        clearTimeout(timeoutHeightInc);

    }
}
于 2012-08-12T21:23:03.443 に答える