1

私はこの問題に遭遇しました:私は棒グラフを作成したいからの数字に応じて。興味深いことに、クァークズモードに設定されたIE8では非常にうまく機能しますが、それ以外の場所では失敗します。エラーがどこにあるのかははっきりとは言えません。ここの誰かが私を助けてくれることを願っています。私はjQueryを使用していますが、getElementById()とelement.style.width = Somevalue(つまり、jQueryなし)を使用しても機能しませんでした:(

[編集:完全なサンプルリンクが削除されました。パスティの有効期限が切れました。]

基本的に:

<input onChange="calculateField(1)" ...>

function calculateField(fieldname){
    value = $("#input_" + fieldname).val();
    fancyMagic();
    value = 6 * value; // for testing

    $("#subtotal_" + fieldname).html(value);
    updateDiagram();
}

function updateDiagram(){
    // gather required into, maxwidth, maxval, etc...

    // fetch 'normal' bar
    var target = $("#animatebar_1");
    var width = maxwidth * (value / maxval);

    // set width to proper width
    target.width(width);

    // like for avg bar
    var avgtarget = $("#avgbar_1");
    var avgwidth = maxwidth * (averagevalue / maxval);
    avgtarget.width(avgwidth);
}

さまざまな設定でFF、IE8、Operaをすべて試しましたが、うまくいきません。バーの幅は直後にゼロに設定されます。興味深いことに、IE8のクァークズモードは機能します。

私が愚かであるのは私だけだと確信していますが、これについて助けていただければ幸いです。また、.css()を使用してサイズを変更しようとしましたが、どちらも機能しませんでした。

よろしくお願いします。

4

4 に答える 4

4

問題はスパンタグの使用にあるのではないかと思います。代わりにdivを使用する必要があります。スパンタグは幅を無視します。

于 2009-12-01T16:28:07.173 に答える
3

解決策は実際には非常に簡単です。IE以外のブラウザは、ボックスモデルに正しく準拠しています。これは、インライン要素の幅を設定できないことを意味します。使用しているバーはSPAN要素であり、これらは次のように設定されています。display:inline

したがって、解決策は、SPANの代わりにDIVを使用するかdisplay:block、.animbarsと.avgbarsの両方のCSS宣言を追加することです。それはあなたの意図した視覚的なデザインを壊すかもしれませんが、それを軌道に戻すのはそれほど難しいことではありません。

于 2009-12-01T16:24:15.477 に答える
0

どこでmaxvalを取得しますか?null、nan、またはゼロのいずれかです。いずれにせよ、そこでエラーが発生します。

于 2009-12-01T15:20:05.643 に答える
0

target.css('width'、width + "px")を追加してみてください

それ以外は、明らかなエラーは見当たりません。

于 2009-12-01T15:28:17.133 に答える