jquery / javascript设置宽度失败答案

【问题标题】：jquery / javascript setting width failsjquery / javascript设置宽度失败
【发布时间】：2012-10-16 19:23:02
【问题描述】：

我遇到过这个问题：根据我想创建条形图的数字。有趣的是，它在 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);
}

我在各种设置和 Opera 中尝试了所有 FF、IE8，但它根本不起作用。栏的宽度在之后立即设置为零。有趣的是，IE8 quirks 模式有效。

我很确定这只是我愚蠢，但我会很感激这方面的帮助。我也尝试使用 .css() 来更改大小，但也没有用。

非常感谢您。

【问题讨论】：

console.log 你所有的数学方程，以确保它们都被计算为实际数值（而不是 NaN 或字符串）。 IE 中对奇数数学的一些处理存在细微差异（例如除以零）。
我使用 IE 开发工具栏和 firebug AND Opera 的蜻蜓来单步执行代码，并且我在所有变量中的值总是正确的（或者至少看起来正确；对于整数值和简单的分数，它可以工作）。
顺便说一下，开发工具和蜻蜓报告宽度为零，firbug 目前声称 40px。更改宽度之前/之后的 console.log 为我提供了合理的 item.width() 值。可见性报告为“可见”。（通过 Firebug。我还没有找到如何从 jQuery 中读取 CSS。）

标签： javascript jquery cross-browser width quirks-mode

【解决方案1】：

我认为问题可能出在跨度标签的使用上。您应该改用 div 。 Span 标签忽略宽度。

【讨论】：

好吧。我当然没想到。谦逊的教训，关心细节以及古怪的怪癖模式是多么的古怪。谢谢你，MillsJROSS，真的帮我解决了这个问题。
哈！天才。不错，我被难住了。

【解决方案2】：

解决方案其实很简单。 IE 以外的其他浏览器正确地遵循盒子模型。这意味着您不能设置内联元素的宽度。您使用的条形图是 SPAN 元素，这些元素设置为 display:inline

因此，解决方案将使用 DIV 而不是 SPAN，或者为 .animbars 和 .avgbars CSS 声明添加 display:block。它可能会破坏您预期的视觉设计，但让它回到正轨并不难。

【讨论】：

感谢您详细解释忽略跨度宽度背后的动机。（我接受另一个答案的原因很简单，因为我首先看到了它。）

【解决方案3】：

你从哪里得到 maxval？它要么为空，要么为零。无论哪种方式，您都会出现错误。

【讨论】：

如完整示例所示： var maxval;如果（值 > 平均值）{ maxval = 值； } else { maxval = 平均值；（第 45 行及以下），其中值和平均值都是“全局变量”（第 29 行及以下）；当我单步执行代码时，一切都已定义：| （另外：它不能解释为什么它在怪癖模式下工作？）

【解决方案4】：

尝试添加 target.css('width', width + "px")

除此之外，我看不到任何明显的错误。

【讨论】：

除了事后看来确实是一个明显的错误，恐怕它没有用
这甚至不是一个错误，我假设 jquery 无论如何都会默认它为 px 。我真的只是抓着稻草：p
哦，试试 $(target) ？只是预感。
如果 that 会起作用，我会很好奇为什么怪癖模式不在乎呵呵。抱歉，没有解决问题 :(（或者即使是最简单的 JavaScript，我也无法正确编码。）
您是否已经尝试过不将元素分配给变量并改用 jquery 选择器？无论如何，这似乎是几行不必要的行。