Question

我有一个弹出菜单，其中一些弹出窗口隐藏自己，其他人根据鼠标的位置取消隐藏。您在购物网站上看到的典型影展，例如亚马逊。

我尝试在后台使用JavaScript插入，以使用jQuery动态设置这些弹出窗口中显示的文本的填充。

问题是我需要获得某些元素的高度，当我使用jQuery为给定元素使用.height()值时，如果其中一部分的弹出部分被隐藏，则返回零（{{ 1}}）。如果我取消隐藏弹出部分，该元素的高度将更改为当父图纸可见时其高度应该是什么。

当元素实际上不可见时，是否有任何方法可以读取元素的实际高度？

Answer 1

如果通过＆＃34;隐形＆＃34;你的意思是display: none，然后没有。{/ p>

但是，您可以在技术上可见的同时使元素几乎不可见，例如与position: absolute; left: -99999px。这将允许您测量它。

当然，即使使用这种技术也存在一定的限制（取决于其他样式，元素在绝对定位时可能会有不同的布局;如果它没有绝对定位那么它会占用布局中的空间，影响其他元素）但可以用它来做很多事情。

Answer 2

我们必须查看您的实际HTML和代码，以了解最适合您的解决方案。我的猜测是，您可以使用相对定位来解决您的问题，而无需知道高度。

但要回答您的具体问题，将元素布局到其实际高度而不在屏幕上显示的一种方法是暂时将其更改为：

position: absolute;
visibility: hidden;
display: block;

这将使其在浏览器中在技术上可见（因此它将获得布局），即使它不是最终用户可以看到的东西。然后，读取它的高度，然后将它的位置和可见性显示回原来的值。

事实上，在某些情况下jQuery的.height()方法已经为你做了这个临时交换（我刚刚介绍了一个测试用例，看到它做了）所以我想更进一步帮助你更直接地说，我们确实需要查看您的实际HTML和JavaScript以查看您的具体问题。

Answer 3

一种方法是将元素抛出屏幕，取消隐藏，获取高度，然后再次隐藏它。

<script>
function getMenuItemHeight(elementSelector) {
  var elementHeight = 0;
  var myElement = $(elementSelector);
  myElement.css({'position':'absolute','left':'-9999x'}).show();
  elementHeight = myElement.height();
  myElement.hide().css({'position':'','left':''});
  return elementHeight;
}
</script>

或者，您可以克隆元素并将其放在屏幕外容器中，获取高度，然后销毁副本。唯一的问题是它可能没有菜单的CSS样式，这意味着你可能得不到相同的高度值。但是，如果您只是为屏幕外容器中的项目添加CSS规则，则很容易修复。

<script>
function getMenuItemHeight(elementSelector) {
  var elementHeight = 0;
  var myElement = $(elementSelector).clone();
  var container = $('<div id="offscreen-container" style="position:absolute;left:-9999px">');
  container.append(myElement);
  elementHeight = myElement.height();
  container.remove();
  return elementHeight;
}
</script>

有什么方法可以获得不可见元素的可见高度？

3 个答案: