jQuery：文檔準備好並呈現後獲取div寬度

我試圖獲得div容器的寬度，以將另一個div中的另一個css屬性設置爲第一個div的寬度，我知道該頁面是完全加載和渲染。jQuery：文檔準備好並呈現後獲取div寬度

我有這樣的代碼：

$().ready(function() { 
    doLayout(); 
} 
function doLayout() { 
    var $width = $("#sidebar").attr("width"); 
    $("#content").css("left", width); 
}

的問題是，在呈現頁面，因此寬度屬性未設置（或「未定義」）之前的準備被調用。我怎樣才能確定當前的寬度？

編輯： 建議的修改之後，我必須有這個工作，但fiddle的代碼，但是在我的實際應用中它不是。所以，問題是其他地方，我想:(

來源

2012-03-28 lzdt

您忘記了'document'關鍵字。 '這是$（document）.ready（function ...）' – 2012-03-28 16:12:17

@aschuler。檢查API。你錯了。儘管它已被棄用。 – gdoron 2012-03-28 16:13:43

你能否提供一個資料來源？如果我閱讀http://api.jquery.com/ready/，我會看到'$（）。ready（處理程序）（不推薦）' – 2012-03-28 16:14:59

使用load等待所有圖片/外部內容加載爲好，因爲這可能會改變元件尺寸：

$(window).load(function() { 
    doLayout(); 
});

然後拿到計算的寬度，使用width：

$("#content").width(); // width in px

來源

2012-03-28 16:17:17 paislee

使用加載可能會導致可見的渲染問題可能要使用兩者的組合，這取決於這是做什麼 – 2012-03-28 16:24:07

謝謝，現在有一個工作小提琴（請參閱編輯帖子），但我的真實代碼仍然不是。 – lzdt 2012-03-28 17:27:37

$(document).ready(function() { 
    doLayout(); 
} 


function doLayout() { 
     var width = $("#sidebar").css("width"); 
     $("#content").css("left", width); 
    }

來源

2012-03-28 16:12:26

我不想知道css屬性的寬度，因爲它沒有設置，而且寬度是動態的。我想知道瀏覽器窗口中的實際渲染大小。 – lzdt 2012-03-28 16:22:15

比您想要使用.css（「width」）或outerWidth（）或innerWidth（）還要等待load事件觸發。在這一天結束時，我們沒有太多的信息可以繼續，你可能想要在JS小提琴中發佈相關代碼來向我們展示，我們可以更好地解釋如何解決你的問題。 – 2012-03-28 16:26:23

我在原來的問題中加入了工作小提琴。我怎樣才能「等待」直到加載事件觸發？（對不起，如果它的愚蠢問題，我是新來的）。 – lzdt 2012-03-28 17:25:21

用途：

$(document).ready(function() { 
    doLayout(); 
} 

function doLayout() { 
    var width = $("#sidebar").css("width"); 
    $("#content").css("left", width); 
}

這不會幫助你，如果寬度由圖像控制，如圖像時可能不會呈現該文件已準備就緒。如果這仍然不起作用，我們需要更多的上下文。

來源

2012-03-28 16:13:11

我認爲使用.css（'width'）將會是更好的選擇 – 2012-03-28 16:14:39

您修正了什麼問題？我沒有看到任何區別。 – gdoron 2012-03-28 16:18:53

據我瞭解，$（）。someFunction（...）和$（document）.someFunction（...）之間沒有區別。這兩個變體都會在我的代碼中調用，但我的寬度仍然是「未定義」。 – lzdt 2012-03-28 16:19:22

一個div不會有任何的width屬性，它可能具有的width CSS樣式屬性，您可以檢索使用.css('width')，但你也可能是inte休息在outerWidth()或innerWidth()或width()，它們返回由JavaScript計算的寬度。

的上述width方法的不同可以在文檔中讀出，而只是一個很好的解釋;

outerWidth()考慮到填充+餘量
width()需要填充考慮
innerWidth()既不需要考慮。

來源

2012-03-28 16:13:20 Matt

可能會更新$（） - > $（文檔） – 2012-03-28 16:20:50

有類似問題（offsetWidth爲0，因爲元素尚未呈現）。我做了一個簡單的：

setTimeout(function() { 
... do stuff that needed final width of object ... 
}, 0)

而且它似乎對我的情況工作完美無瑕。這基本上要求在javascript當前callstack爲空時被回叫。

我猜如果你在javascript中創建一個DOM元素，並且它的寬度在外部CSS中被定義爲「100％」，那麼在所有javascript完成運行之前，該對象的offsetWidth（和offsetHeight）。

通過使用setTimeout(callback, 0)，它似乎在瀏覽器完成javascript當前調用後調用，並花費時間將所有CSS應用於新的DOM元素。

來源

2013-05-24 12:32:35 vaab

jQuery：文檔準備好並呈現後獲取div寬度

回答

相關問題