jquery / javascriptの幅の設定が失敗する

StackOverflow https://stackoverflow.com/questions/1826848

質問

この問題に遭遇しました:数値に応じて棒グラフを作成したいと思います。興味深いことに、Quirks モードに設定された 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 の quirks モードは機能します。

私がバカなだけだとは思いますが、助けていただければ幸いです。.css() を使用してサイズを変更しようとしましたが、それも機能しませんでした。

よろしくお願いいたします。

役に立ちましたか？

解決

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

他のヒント

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

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

マックスヴァルはどこで入手できますか？null、nan、またはゼロのいずれかです。どちらにしてもそこでエラーが発生します。

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top