如何使用jquery以編程方式從跨度獲取像素寬度

Question

我正在嘗試做類似的事情：

 $('<span>random text in here</span>').width()

但它返回的寬度是0.（我試圖這樣做的原因是獲取給定文本的像素寬度。）

我如何以編程方式獲得此寬度？

謝謝

Answer 1

你必須讓它呈現。

你可以這樣做：

var s = $('<span>random text in here</span>');
s.appendTo(document.body);
var w = s.width();
s.remove();

示范

注意 ：

• 如果你像我一口氣這樣做，就不會顯示任何內容。 出於所有實際目的，DOM中沒有插入任何內容，
• 你也可以使用內存畫布，但它不會處理比簡單文本更復雜的東西，也不會考慮你的span的css設置。

這是使用內存畫布測量某些文本寬度的解決方案：

var canvas = document.createElement('canvas');
var c = canvas.getContext('2d');
// set here c.font to adjust it to your need
var w = c.measureText('random text in here').width;

示范

我會用在一般情況下，第一個，但它可能取決於你為什么要測量的文本。