使用jquery创建html元素，我如何获得元素的宽度？

Question

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

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

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

如何找到这个新元素的宽度？我正在尝试拨打newListItem.width()，但会返回0.

Answer 1

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

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

然后检查它的宽度。

Answer 2

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

Answer 3

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

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

Answer 4

如果在显示之前需要宽度，则可以将其附加到具有visibility：hidden的容器中。这允许您检查宽度，而不显示元素。