JavaScript-如何用 Jquery 获取隐藏元素的宽度属性

Question

如果一个元素目前没有显示，例如用 inline css 写了 display:none; ，这时直接用$('#element').width(); 获取不到这个元素的真实宽度（返回0）。

Answer 1

给个例子：

 <div id="parent">
Text here ... Can get very long and skew the parent
<table> ... </table>
Text here too ... which is why I want to shrink the parent based on the table
</div>

 #parent
{
display: none;
}

 var $table = $("#parent").children("table");
$table.css({ position: "absolute", visibility: "hidden", display: "block" });
var tableWidth = $table.outerWidth();
$table.css({ position: "", visibility: "", display: "" });

可以参考一下：
Getting the width of a hidden element with jQuery using width

Answer 2

你的这个问题只有旧版的Jquery才存在，可以换个新的版本，或者可以使用 A c tu a l插件来获取隐藏元素的真正宽度，这是插件，你可以看看：http://dreamerslab.com/blog/tw/get-hidden-elements-width-and-height-with-jquery/

Answer 3

元素被隐藏了，直接获取高宽是不行的，所以需要，显示元素，再获取高宽，然后再隐藏元素，恢复之前的状态。
先定义两个方法，显示元素和恢复元素状态：

var resetCSS=function( elem, prop ) {
var old = {};
for ( var i in prop ) {
old[ i ] = elem.style[ i ];
elem.style[ i ] = prop[i];
}
return old;
}
var restoreCSS=function( elem, prop ) {
for ( var i in prop )
elem.style[ i ] = prop[ i ];
}

//保存元素的css值，并显示元素

var old = resetCSS( elem, {
display: '',
visibility: 'hidden',
position: 'absolute'
});

//获得元素高宽
var w = elem.clientWidth || cssX(elem);

//恢复元素样式
restoreCSS( elem, old );

便可以编写一个获得元素宽度的方法了：

function getWidth(elem){

if(elem.style.display!="none"){
return elem.offsetWidth || parseInt(cssX(elem));
}
var old = resetCSS( elem, {
display: '',
visibility: 'hidden',
position: 'absolute'
});
var w = elem.clientWidth || parseInt(cssX(elem));
restoreCSS( elem, old );
return w;

}