0

我正在尝试用相同高度（或字体大小）和宽度的形式替换特定的无类单词，而不是整个字符串。即使我更改了 CSS，我也希望它能够工作。这是我的代码：

var magicWord = "abracadabra";

var width = $('#words').width();
var height = $('#words').height();

var x = width + "px"; 
var y = height + "px";


$('html').append("<form><input type='text' style='width: "+x+"; height: "+y+"; font-family: Courier;'></form>")

这是我更新的fiddlicious。我自己用replace（）想出来的。任何更有效率的东西都将获得令人垂涎的绿色复选标记。

4

3 回答 3

2

您必须将其包装在自己的元素中或做一些更钝的事情（仅使用这些内容生成一个新元素（可能在屏幕外的某个地方），计算该元素的大小，然后将其删除）。您也许可以根据元素行高和字符宽度（以 em 单位）进行粗略计算，但不知道正在使用哪些字符或使用等宽字体系列，我无法想象它会是非常精准。

于 2013-07-11T00:10:42.613 回答
2

您必须拥有该词的 DOM 标识符。你可以改变你的喜欢:-

<span id ="words">Here is a bunch of <span> abracadabra </span> </span>

和 javascript 作为

var magicWord = "abracadabra";

var width = $('#words span').width();
var height = $('#words span').height();

var x = width + "px";  
var y = height + "px"


$('html').append("<form><input type='text' style='width: "+x+"; height: "+y+"; font-     
family: Courier;'></form>")
于 2013-07-11T00:12:34.073 回答
1

Html 画布具有文本度量能力。您可以像这样获得文本宽度：

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.font="14px Verdana";
var width = context.measureText("abracadabra").width;

你也可以得到高度，但这更难，因为你必须使用画布来做线扫描。

于 2013-07-11T00:14:43.573 回答