用jquery创建html元素，如何获取元素的宽度？

Question

我使用jQuery创建html元素，如下所示：

    var newListItem = $("<li>" + variableName + "</li>");

    var widthOfNewItem = newListItem.width(); //<-- will return 0

我怎样才能找到这个新元素的宽度？我试图调用newListItem.width()，但它返回0。

Answer 1

如果它在页面上的任何地方都不存在，为什么它会有宽度？它的宽度将由它的容器大小和css定义。到目前为止，您还没有将它附加到任何东西上，所以它只是在JS的边缘漂浮。

Answer 2

您还没有将元素放入DOM中。您只需创建一个元素并将其存储到一个变量中。将其附加到诸如以下内容：

$('ul').append(newListItem);

然后检查它的宽度。

Answer 3

您可以使用offsetWidth获取元素的宽度；也可以使用offsetWidth获取元素的高度；例如：

var obj = document.getElementById('Your_Element_ID') ;
var width = obj.offsetWidth ;
var height = obj.offsetHeight ;