Question

我的网络应用程序中的某些元素没有显示，我希望找到它们的实际高度来进行一些计算。我正在使用jquery 1.6库来查找高度，但它返回的隐藏元素的高度和宽度的值不正确，以百分比表示高度。这是一个jsfiddle示例：http://jsfiddle.net/LT9fU/ 任何人都可以建议找到隐藏HTML元素的维度的正确方法。

以下是参考

的jsfiddle示例

HTML：

<body>
<div class="wrapper">
    <div class="vsbl"></div>
    <div class="hdn"></div>
</div>

CSS：

.wrapper{
  height:300px;
  width:300px;
  border:1px solid black
}
.vsbl,.hdn{
  height:100px;
  width:70%;
  margin:10px;
  border:1px solid black;     
}
.hdn{
  display:none;
}

使用Javascript：

$().ready(function(){
  var content = "";
  content += $(".vsbl").width() + "<br>";
  content += $(".hdn").width();
  document.body.innerHTML += content;
});

我得到的输出是 210表示可见块，392表示隐藏块。

Answer 1

我不确定浏览器如何处理隐藏元素，但是为了确保你可以使用jQuery创建一个span，将你的元素追加到用户$（那个span）.width（）

这类事：

$("<span>" + inner html of your element +"</span>").width();

Answer 2

您可能无法获得具有display: none的元素的大小。

一些替代方案是：

将元素设置为visibility: hidden
将元素放在视口外（例如：left:-10000px）

Answer 3

试试这个（没有jQuery）：

<div class="wrapper">
  <div id="vsbl"></div>
  <div id="hdn"></div>
</div>

的javascript：

var content = document.getElementById('hdn').style.width + "<br />";
var content += document.getElementById('hdn').style.height;
document.body.innerHTML += content;

我希望它有效！

如何查找显示为none的HTML元素的实际高度或宽度

3 个答案: