如何根據javascript中的字符計算<div>標簽的寬度？

Question

我需要根據字符串長度，字體，大小來創建一個絕對定位的標簽，其寬度可變。

例：

<div>hello</div>

為此我需要大約50px的寬度。 如何在Javascript中計算？ 謝謝

Answer 1

耶穌你們，JavaScript！== jQuery。 無論如何，要使用JavaScript獲取元素的寬度，您可以使用offsetWidth如下所示：

http://jsfiddle.net/gJyKV/1/

（碼）

document.getElementById('test').offsetWidth

即使它絕對定位，如果獲得當前寬度！

Answer 2

在跨度中創建文本，測量其渲染寬度，然后將其重新定位到品味。 如果您不喜歡跳躍位置，您可以隨時將其渲染到屏幕外，然后重新定位。

http://jsfiddle.net/vW6Wp/

var test = $('<span>hello</span>').appendTo('body');
alert(test.width());

Answer 3

我相信jQuery庫也提供了這個。 如果你給這個div ID'get-width'，下面的代碼可能會返回寬度：

$('#get-width').width();

您可以通過使用以下代碼測試它來給它一個應該：

<div id="test">hellloooo</div>
<script type="text/javascript">
  $(document).ready(function() {
    alert($('#test').width());
  }
</script>

Answer 4

我不知道為什么人們總是用jquery回答問題'是jquery是腳本語言的標准，如果那個人只需要那個項目關於div的寬度來加載所有腳本。 有一些叫做javascript的人。

抱歉這個大話但我不喜歡它

@tooty你可以通過id抓住div然后得到offsetWidth來獲得javascript

document.getElementById('divId').offsetWidth

問候

Answer 5

您不需要進行復雜的計算，只需使用此方法（獲取元素寬度的Dom方式）。

正如您所看到的，復雜的方式，因為每個瀏覽器都有不同的方式來執行它。 這就是讓Mootools和其他JavaScript庫首先融入生活的驅動力。 幫自己一個忙，並使用其中一個庫。
這是Mootools的方式 。