HTML DOM提醒style.width

可能重複：
Get element width in px HTML DOM提醒style.width

我如何才能找到DIVA的寬度是多少？此代碼會彈出一個空警報。

<script type="text/javascript"> 

function DisplayResult(){ 
    width = document.getElementById("divA").style.width; 
    alert(width); 
} 
var widthFinder = { 
    find: DisplayResult 
}; 
widthFinder.find(); 

</script> 

<div id="divA">Alert this string's length in pixels</div>

編輯：

現在，這提醒「空」。仍然不完全是我希望的。

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript"> 

function DisplayResult(){ 
var width = $("#divA").width(); 
alert(width); 
} 
var widthFinder = { 
find: DisplayResult 
}; 
widthFinder.find(); 

</script> 

<div id="divA" style="display:inline; width:100%;">Alert this string's length in pixels</div> 

</body> 
</html>

來源

2012-05-27 Rick Ryan

除非你有'divA'的寬度樣式，否則Javascript正確地提醒''「''。您需要使用其他方法（可能是通過jQuery的一些方法）來查找div的實際計算寬度，而不是查找其寬度的CSS樣式。 – Nightfirecat

@Nightfirecat，謝謝你會推薦任何jQuery語句嗎？ –

由於您已經將JQuery庫添加到文檔的頭部，因此我已經重申了您的問題以包含'jquery'，如果當前版本不足，將會帶來另一波答案。 –

你的代碼設置爲被執行前的DOM準備好，因此它爲什麼不找任何元素，並返回一個值null。

function DisplayResult(){ //declared function in the document's head, ok 
    var width = $("#divA").width(); 
    alert(width); 
} 

$(document).ready(function(){ //function calls here, when the DOM is ready 
    var widthFinder = { 
    find: DisplayResult() 
    }; 
    widthFinder.find(); 
});

我包裹$(document).ready()事件，防止執行代碼之前的DOM準備好你的內部函數調用。我還將()添加到DisplayResult()以確保它被解釋爲函數調用。

試試這個JSFiddle的例子。

來源

2012-05-27 07:48:46

它的工作原理！非常好的Fabricio！你再一次令我難以置信地印象深刻。謝謝你今晚幫我這麼多。我真的很感激它 –

這是沒有問題:)雖然時間稱它爲一夜但睡得很好：P –

，你總是可以使用jQuery

alert($("#divA").width());

，或者你可以嘗試這種方式，並保持存儲在變量

var width = $("#divA").width()); 
alert(width);

來源

2012-05-27 06:48:22 theliberalsurfer

嗯這是提醒「空」，然後殺死我的腳本的其餘部分。 –

確保你已經在你的文檔中包含了JQuery庫。 :) –

@FabricioMatte，感謝你今天早些時候我已經有哈哈。和Css Tube你的第二個例子仍然返回「null」，但它不會再殺死我的腳本 –

天后的寬度使用jQuery，你要什麼都可以輕鬆完成&這裏有兩種方法：

之一，已經回答了你可以做

alert($("#divA").width());

這將返回寬度爲單數。如果寬度爲600像素，它會返回600

其次，你可以使用.css屬性來獲取寬度像

alert($("#divA").css("width"));

這正好返回寬度在給定css文件。如果寬度是600像素，那麼它將返回600px而不僅僅是600.

來源

2012-05-27 07:43:58 gopi1410

使用alert（$（「＃divA」）。width（））;當寬度是100％時。它在90％的時間內返回div的長度。但現在它返回100（因爲100％，50％時50％），我不明白爲什麼。 gopi，你能解釋一下嗎？ –

對於非Jquery版本。在onload發生後嘗試延遲功能調用。例如：

window.onload = function(){ 
    DisplayResult(); 
}

來源

2012-05-27 07:46:26

HTML DOM提醒style.width

回答

相關問題