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

在开发前端页面时，时常需要获取元素的宽度以便进行样式布局等操作。但是当元素处于隐藏状态时，获取元素宽度将会出现问题。那么，在 jQuery 中如何获取隐藏元素的宽度呢？下面我们来介绍几种方法：

1. 使用 show() 方法

使用 jQuery 的 show() 方法可以将隐藏的元素显示出来，显示后再获取元素宽度即可。示例代码如下：

$(document).ready(function(){
    var hiddenEle = $(".hidden-ele");
    hiddenEle.show();
    var width = hiddenEle.width();
    hiddenEle.hide();
    console.log(width);
});

2. 使用 clone() 方法

使用 jQuery 的 clone() 方法可以复制一个元素，而复制出来的元素并不隐藏。在复制出来的元素上获取宽度即可。示例代码如下：

$(document).ready(function(){
    var hiddenEle = $(".hidden-ele");
    var clonedEle = hiddenEle.clone().appendTo('body');
    var width = clonedEle.width();
    clonedEle.remove();
    console.log(width);
});

3. 使用 CSS 中的 display 属性

通过修改 CSS 中的 display 属性，可以将隐藏的元素显示出来，获取元素宽度后再重新隐藏元素。示例代码如下：

$(document).ready(function(){
    var hiddenEle = $(".hidden-ele");
    var savedDisplay = hiddenEle.css('display');
    hiddenEle.css('display','block');
    var width = hiddenEle.width();
    hiddenEle.css('display',savedDisplay);
    console.log(width);
});

使用上述三种方法，我们便可以轻松获取隐藏元素的宽度。