找到一个自动调整大小的元素的宽度

基本上我需要一个跨度的宽度。做需要使用键盘上找不到的几个自定义字符我正在构建我自己的“输入”字段，使用“div”。每个字符都被包裹在一个附有事件监听器的“span”标签中。这将允许用户单击字符串中的任意位置，并将光标移动到字符后面的位置，同时允许用户添加或删除字符串中间的字符。找到一个自动调整大小的元素的宽度

我正在使用“offsetLeft”和“offsetWidth”来查找字符的右侧，问题是当单击字符/跨度时，“offsetWidth”是关闭的。因此，例如，如果我使用14像素字体，则“M”将返回35像素宽，实际上是11像素。并且有几种变化，像“S”这样的平均大小的字符实际上是9时会返回26像素。所以在尺寸上存在变化。现在你可能想知道我是如何找到实际的字母大小的，并且使用了Firebug。如果Firebug可以找到它，我会假设我可以，我只是没有想出如何。所以我希望这里有人知道。我也尝试使用“getComputedStyle”和“currentStyle来查找宽度，它返回”auto“。还尝试过getBoundingClientRect（）。它的宽度与offsetWidth相同，不同之处在于它也可以找到像素的分数在宽度，所以一个“M”是35.366668701171875像素宽，奇数

编辑：

基于user1289347交我应该注意的是，“offsetWidth”导致“offsetLeft”由错误的量是断

来源

2012-03-26 Krik

欢迎来到[SO]。我可以看到你已经发布了几次，但我认为你需要查看[Markdown for SO]（http://stackoverflow.com/editing-help）。 – zzzzBov 2012-03-26 00:39:12

您是否使用过javascript调试器来查看dom中的样式元素，并查看似乎是找到此信息的最佳方式？ – 2012-03-26 00:39:52

firebug：https：//getfirebug.com/layout – dsdsdsdsd 2013-11-04 21:46:20

-1

尝试使用jquery width（），每次使用它时都会很好地计算dom的宽度。

如果jQuery是出了问题

创建一个DIV风格与下列风格。在JavaScript中，设置要测量的字体大小和属性，将字符串放入DIV中，然后读取DIV的当前宽度和高度。它将伸展以适应内容，并且大小将在字符串呈现大小的几个像素内。

HTML：

<div id="Test"> 
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>

CSS：

#Test 
{ 
    position: absolute; 
    visibility: hidden; 
    height: auto; 
    width: auto; 
}

的JavaScript（片段）：

var test = document.getElementById("Test"); 
test.style.fontSize = fontSize; 
var height = (test.clientHeight + 1) + "px"; 
var width = (test.clientWidth + 1) + "px";

这将创建一个测试一个单独的可测试DIV，信用这里Calculate text width with JavaScript这是一个很多工作，但它应该通过在现有标记之外进行操作来为您带来更好的结果。

来源

2012-03-26 00:48:14 user1289347

OP不需要jQuery – Joseph 2012-03-26 00:50:32

找到一个自动调整大小的元素的宽度

回答

相关问题