jquery / javascript 设置宽度失败
我遇到过这个问题： 根据我想创建一个条形图的数字。有趣的是，它在设置为怪异模式的 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() 来更改大小，但也没有成功，
非常感谢您。
I have encountered this problem:
Depending on numbers from I want to create a bar chart. Interestingly it works very well in IE8 set on quirks mode, but fails everywhere else. I cannot really say where the error is and I hope that someone here can help me. I am using jQuery, but using getElementById() and element.style.width = Somevalue (i.e. without jQuery) did not work either :(
[Edit: Full example link removed; the pastie expired.]
Basically:
<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);
}
I tried all of FF, IE8 in various settings and Opera and it simply doesn't work. The bar's width is set to zero immediately after. IE8 quirks mode works, interestingly.
I am pretty sure it's just me being dumb, but I will appreciate help with this. I also tried to use .css() to change the size, but it did not work either.
Thank you muchly in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我认为问题可能是跨度标签的使用。你应该使用 div 来代替。 Span 标签忽略宽度。
I think the problem might be the use of the span tags. You should use a div instead. Span tags ignore widths.
解决办法其实很简单。除 IE 之外的其他浏览器都正确遵循盒模型。这意味着您无法设置内联元素的宽度。您使用的栏是 SPAN 元素，并且它们设置为
display:inline因此解决方案是使用 DIV 而不是 SPAN，或者为 .animbars 和 .animbars 添加
display:block.avgbars CSS 声明。它可能会破坏您预期的视觉设计，但让它回到正轨应该不难。the solution is actually very easy. Other browsers than IE follow the box-model correctly. This means that you can't set a width of an inlined element. The bars you are using are SPAN elements and these are set to
display:inlineSo the solution would be using DIV's instead of SPAN's or adding
display:blockfor both .animbars and .avgbars CSS declarations. It may break your intended visiual design but it shouldn't be so hard to get it back on tracks.你从哪里得到 maxval？它可以是 null、nan 或零。不管怎样，你都会得到一个错误。
where do u get maxval? it either null,nan or zero. either way u get an error there.
尝试添加 target.css('width', width + "px")
除此之外，我看不到任何明显的错误。
try adding target.css('width', width + "px")
Other than that, i can't see any obvious errors.