2011-03-09 77 views
3

我試圖用JavaScript獲得div的寬度。最初div的寬度是未定義的,即寬度取決於文本數量。是否有可能獲得這種div的寬度?我試着用下面的JavaScript代碼來做到這一點,但我從Chrome的控制檯越來越寬differerent當我檢查的div錯誤的div寬度,當它與javascript

var mydiv = document.getElementById("error_message"); 
var curr_width = mydiv.clientWidth; 
alert(curr_width); 

感謝您的關注

+0

最初,一個無風格的div的寬度等於它的容器寬度。這是由於默認的'display:block'樣式。 – zzzzBov 2011-03-09 17:31:09

+0

你是否也可以添加HTML ...我不確定你的DIV是否是其中的文本的寬度......它是一個BLOCK元素 – ManseUK 2011-03-09 17:32:20

+0

它是用'document.write(「

Wrong username or password!
」)生成的;'和css是'div#error_message { \t display:block; \t position:absolute; \t padding:2px; \t top:0px; \t \t border:1px solid#FF0000; \t背景:#FFCCFF; \t font-family:Arial; \t font-size:13px; \t color:#FF0000; }' – andriy 2011-03-09 17:34:05

回答

6

使用offsetWidth

clientWidth計算寬度,offsetWidth是一個在「鉻檢查元素」(我覺得)

也可以參考註釋:P

+0

嘗試offsetWidth太 – andriy 2011-03-09 17:38:29

+0

適合我...所以我不知道你可以有什麼錯:P – n00b 2011-03-09 17:41:29

+0

但你的div也是最初不開始? – andriy 2011-03-09 18:20:17

1

雖然第ËOP不指定一個或其他方式,如果你碰巧有jQuery的可用,你可以隨時使用這個:

var curr_width = $('#error_message').width(); 
+0

當我警覺(curr_width)'function(a){var f = this [0]; if(!f)return a == null?null:this; if(d.isFunction(a))return this.each(function(b){var c = d(this); c [ e)(a.call(this,b,c [e]()))}); if(d.isWindow(f)){var g = f.document.documentElement [「client」+ c]; return f .document.compatMode ===「CSS1Compat」&& g || f.document.body [「client」+ c] || g} if(f.nodeType === 9)return ...' – andriy 2011-03-09 18:07:12

0

我設法解決這個問題!我試圖直接在javascript中創建div,而沒有在html body上定義div。所以在我創建的標籤裏面

<div id="error_message" style="visibility:hidden;"></div> 

它的工作! 最終的javascript代碼是:

document.write("<div id=\"error_message\">Wrong username or password!</div>"); 
var mydiv = document.getElementById("error_message"); 
var curr_width = mydiv.offsetWidth; 
alert(curr_width);