找到一個自動調整大小的元素的寬度

基本上我需要一個跨度的寬度。做需要使用鍵盤上找不到的幾個自定義字符我正在構建我自己的「輸入」字段，使用「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

找到一個自動調整大小的元素的寬度

回答

相關問題