如何在jQuery中获得隐藏元素的宽度

想要获得一个隐藏的元素的宽度，需要考虑以下几个步骤：

1. 生成这个元素的副本或将其显示出来。
2. 获取副本元素的宽度。
3. 隐藏副本或将其还原为原本的样式。

接下来，我们将使用jQuery的方法逐步讲解如何实现此过程：

生成元素副本法

我们可以使用.clone()方法来生成隐藏元素的副本，然后将副本都插入到文档中，这样就可以获取其宽度。

// 先将隐藏元素显示出来，clone并插入到文档中，获取宽度后再隐藏掉
var $hiddenElement = $('.hidden-element');
var $clone = $hiddenElement.clone().css({
  visibility: "hidden",
  display: "block",
  position: "absolute"
}).appendTo('body');
var width = $clone.width();
$clone.remove();

在这个示例中，我们首先选择了一个名为.hidden-element的隐藏元素，然后使用clone()方法生成一个副本，并将其加入到文档流中。为了避免影响到页面的布局，我们设置了这个副本元素的三个 CSS 属性：visibility、position 和 display。接下来，我们就可以通过width()方法来获取这个副本元素的宽度值了，最后将其从文档流中删除即可。

设置CSS属性法

如果不想在文档中插入多余的元素，我们还可以通过设置 CSS 属性的方式，让隐藏元素变得“模拟可见”，从而获取其宽度。

// 先记录原始的元素状态
var $hiddenElement = $('.hidden-element');
var originalVisibility = $hiddenElement.css('visibility');
var originalDisplay = $hiddenElement.css('display');
$hiddenElement.css({
  visibility: "hidden",
  display: "block",
  position: "absolute"
});
var width = $hiddenElement.width();
$hiddenElement.css({
  visibility: originalVisibility,
  display: originalDisplay
});

在这个示例中，我们首先获取了一个名为.hidden-element的隐藏元素，然后保存了其原始的 CSS 属性：visibility和display。接下来，我们修改这个元素的三个 CSS 属性，让其模拟成可见的元素，并获取其宽度值。最后，我们将元素恢复为原始状态即可。

无论是哪种方式，都可以成功获取到被隐藏元素的宽度。