javascript - 如何获取 Label、Button、TextArea 或 TextBox 的字符的总水平宽度？

Question

Label、Button、TextArea 和 TextBox(以下简称 LBTT)能够显示文本字符串。有什么方法可以查看已经确定大小的 LBTT 对象，并确定给定对象的每行可能适合的字符数。

例如，假设我有一个宽度固定的文本区域。有没有办法询问这个 textArea 对象它可以水平容纳多少个字符？从概念上讲，类似于 .getHorizo​​ntalCharacterWidth() 方法？

这是我的“视觉”ascii 标签示例。 “-”和“|”应该分别代表 Label 的垂直和水平边缘。

 -------
|       |
|ABCDEFG|
|       |
 -------

如您所见，此标签每条水平线最多可容纳 7 个字符(在本例中为 A-G)？因此，如果您在此标签上调用我想象中的 .getHorizo​​ntalCharacterWidth()，它将返回 7。问题是，您将如何实现 .getHorizo​​ntalCharacterWidth()？

假设我使用的是固定宽度的字体。

谢谢

Answer 1

是的，假设如您所说，文本区域使用等宽字体，aTextArea.getCharacterWidth() 应该给出水平可用的字符数。虽然它只会返回 html 属性 cols，它返回浏览器默认宽度(或您使用 aTextArea.setCharacterWidth() 设置的任何内容)而忽略 CSS 指定的宽度。

虽然如果您知道以像素为单位的字体大小，您可以通过将像素宽度除以像素字体大小来粗略估计有多少字符是可见的。请注意，这可能会因字体的字符高度/比率而异，并且某些浏览器将返回包括或不包括滚动条(如果存在)的宽度。