使用 javascript 获取 div 宽度错误答案

【问题标题】：Wrong div width when getting it with javascript使用 javascript 获取 div 宽度错误
【发布时间】：2011-03-09 17:29:11
【问题描述】：

我正在尝试使用 javascript 获取 div 的宽度。最初 div 的宽度是未定义的，即宽度取决于其上的文本数量。是否有可能获得这种 div 的宽度？我正在尝试使用以下 javascript 代码来做到这一点，但是当我检查 div 时，我的宽度与 Chrome 控制台不同

var mydiv = document.getElementById("error_message");
var curr_width = mydiv.clientWidth;
alert(curr_width);

感谢您的关注

【问题讨论】：

最初，无样式的 div 的宽度将等于其容器的宽度。这是由于默认的 display:block 样式。
你也可以添加 HTML ...我不确定你的 DIV 是否是其中文本的宽度 ...它是一个 BLOCK 元素
它是用document.write("<div id=\"error_message\">Wrong username or password!</div>");生成的，css是div#error_message{ display:block; position: absolute; padding: 2px; top: 0px; border: 1px solid #FF0000; background: #FFCCFF; font-family: Arial; font-size: 13px; color: #FF0000; }
警报中显示的宽度是多少？你期望是什么？
在警报中是 1008，在控制台中是 183，所以我期待 183

标签： javascript html coding-style

【解决方案1】：

使用偏移宽度

clientWidth 是计算宽度，offsetWidth 是“Chrome 检查元素”中的宽度（我认为）

还阅读了 cmets :P

【讨论】：

但您的 div 最初也是未定义的？
我成功了！但是有时当我刷新页面时，它会打印正确的宽度，有时会再次打印错误的宽度！
不要使用document.write()，而是使用js或jQuery创建节点，并在onload中启动你的脚本...

【解决方案2】：

虽然 OP 没有指定一种或另一种方式，但如果您碰巧有可用的 jQuery，您可以随时使用：

var curr_width = $('#error_message').width();

【讨论】：

我在警觉时收到以下代码（curr_width）function (a){var f=this[0];if(!f)return a==null?null:this;if(d.isFunction(a))return this.each(function(b){var c=d(this);c[e](a.call(this,b,c[e]()))});if(d.isWindow(f)){var g=f.document.documentElement["client"+c];return f.document.compatMode==="CSS1Compat"&&g||f.document.body["client"+c]||g}if(f.nodeType===9)return ...

【解决方案3】：

我设法解决了这个问题！我试图直接在 javascript 中创建 div，而不在 html 正文上定义 div。所以在我创建的标签里面

<div id="error_message" style="visibility:hidden;"></div>

它成功了！最终的javascript代码是：

document.write("<div id=\"error_message\">Wrong username or password!</div>");
var mydiv = document.getElementById("error_message");
var curr_width = mydiv.offsetWidth;
alert(curr_width);

【讨论】：