Question

基本上我需要一个跨度的宽度。是否需要使用键盘上找不到的几个自定义字符我正在构建自己的“输入”字段，使用“div”。每个字符都包含在一个“span”标记中，该标记附加了一个事件监听器。这将允许用户单击字符串中的任何位置并使光标移动到字符后面的位置，它还允许用户在字符串中间添加或删除字符。

我使用“offsetLeft”和“offsetWidth”来查找字符的右侧，问题是当单击字符/跨度时，“offsetWidth”是关闭的。因此，例如，如果我使用14像素字体，则“M”将返回35像素宽，而实际上是11像素。并且有几种变化，像“S”这样的平均大小的字符在实际为9时将以26像素返回。因此，大小调整存在差异。现在你可能想知道我是如何找到实际的字母大小和使用Firebug的。如果Firebug可以找到它我会假设我可以，我只是没有弄清楚如何。所以我希望有人知道。

我也尝试使用“getComputedStyle”和“currentStyle来查找宽度并返回”auto“。还尝试了getBoundingClientRect（）。width它与offsetWidth相同，不同之处在于它还可以找到像素的分数宽度，所以“M”是35.366668701171875像素宽，奇数。

编辑：

基于user1289347帖子我应该注意到“offsetWidth”导致“offsetLeft”也被错误的数量所取消。

Answer 1

尝试使用jquery width（），每当我使用它时，它都能很好地计算dom宽度。 http://api.jquery.com/width/

如果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这是很多工作，但它应该通过在现有标记之外操作来获得更好的结果。

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

1 个答案: