jQuery：在文档准备好并呈现后获取 div-width
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9911554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: get div-width after document is ready and rendered
提问by lzdt
I'm trying to get the width of a div container to set another css attribute in another div to the width of the first one, which I know after the page was fully loaded and rendered.
我正在尝试获取 div 容器的宽度，以将另一个 div 中的另一个 css 属性设置为第一个的宽度，这是在页面完全加载和呈现后我知道的。
I have this code:
我有这个代码：
$().ready(function() {
doLayout();
}
function doLayout() {
var $width = $("#sidebar").attr("width");
$("#content").css("left", width);
}
The problem is, the ready is called before the page is rendered and thus width attribute is not set (or "undefined"). How can I determine the current width?
问题是，在呈现页面之前调用 ready，因此未设置 width 属性（或“未定义”）。如何确定当前宽度？
EDIT:After suggested changes I have this fiddlebut the code there is working, but in my real application it's not. So the problem is somewhere else, I guess :(
编辑：在建议的更改之后，我有了这个小提琴，但那里的代码正在运行，但在我的实际应用程序中却不是。所以问题出在其他地方，我想:(
回答by paislee
回答by Matt
A divwill have no attribute of width. It may have a CSS style property of width, which you can retrieve using .css('width'), but you may also be interested in outerWidth()or innerWidth()or width()which return the width computed by JavaScript.
Adiv将没有 的属性width。它可能有一个CSS样式属性width，您可以检索使用.css('width')，但您可能也有兴趣outerWidth()或innerWidth()或width()其中返回由JavaScript计算的宽度。
$().ready(function() {
doLayout();
}
function doLayout() {
var $width = $("#sidebar").css("width");
$("#content").css("left", width);
}
A good explanation of how the above mentioned widthmethods differ can be read in the documentation, but simply;
width可以在文档中阅读对上述方法有何不同的很好的解释，但很简单；
outerWidth()takes into account padding + marginwidth()takes padding into accountinnerWidth()takes neither into account.
outerWidth()考虑填充+边距width()考虑填充innerWidth()两者都不考虑。
回答by Tim Wickstrom
$(document).ready(function() {
doLayout();
}
function doLayout() {
var width = $("#sidebar").css("width");
$("#content").css("left", width);
}
回答by vaab
Had a similar issue (offsetWidthwas 0 because element was not yet rendered). I did a simple:
有一个类似的问题（offsetWidth是 0，因为元素尚未呈现）。我做了一个简单的：
setTimeout(function() {
... do stuff that needed final width of object ...
}, 0)
And it seems to work flawlessly on my case. This basically asks for being called back whenever javascript current callstack is empty.
它似乎在我的情况下完美无缺。这基本上要求在 javascript 当前调用堆栈为空时被回调。
I guess that if you create a DOM element in javascript and its width is defined in external CSS to be "100%", the offsetWidth(and offsetHeight) of this object won't get calculated before all javascript has finished running.
我想如果您在 javascript 中创建一个 DOM 元素并且它的宽度在外部 CSS 中定义为“100%”，则在所有 javascript 完成运行之前不会计算此对象的offsetWidth（和offsetHeight）。
By using setTimeout(callback, 0), it seems to be called after the browser finishes the javascript current call AND has taken the time to apply all CSS to new DOM elements.
通过使用setTimeout(callback, 0)，它似乎在浏览器完成 javascript 当前调用后被调用，并且花时间将所有 CSS 应用于新的 DOM 元素。
回答by Matthew Darnell
Use:
用：
$(document).ready(function() {
doLayout();
}
function doLayout() {
var width = $("#sidebar").css("width");
$("#content").css("left", width);
}
This won't help you if the width is controlled by an image, as the images may not be rendered when the document is ready. If this still doesn't work, we need more context.
如果宽度由图像控制，这将无济于事，因为当文档准备好时，图像可能不会呈现。如果这仍然不起作用，我们需要更多的上下文。
