javascript - 如何找到未显示的元素的高度-6ren

javascript - 如何找到未显示的元素的高度

转载作者：太空狗更新时间：2023-10-29 13:10:46

我正在编写一个网页，其中有一个表格，其中的行可以滑动打开和关闭。最初，一些行是关闭的 (display: none)，我希望它们滑动打开。设置高度和使用 overflow: hidden 对表格行不起作用，所以我要更改表格内 div 的高度。

这行得通。唯一的问题是在滑动打开之前我需要知道 div 的高度，这似乎是不可能的。我能想到的一种解决方案是加载显示行的页面，然后遍历它们，存储它们的高度并隐藏它们。我不喜欢这个解决方案，因为页面在加载时会跳来跳去。

这是我的问题的一个简单、可运行的示例。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table, td {border: 1px solid black;}
#lower_row {display: none;}
#lower_div {overflow: hidden;}
</style>
<script type="text/javascript">
function toggleLower() {
    lowerRow = document.getElementById("lower_row");
    lowerDiv = document.getElementById("lower_div");
    if (getStyle(lowerRow, "display") == "none") {
        lowerRow.style.display = "table-row";
    }
    else {
        lowerRow.style.display = "none";
    }
    showHeight();
}
function showHeight() {
    lowerDiv = document.getElementById("lower_div");
    document.getElementById("info").innerHTML = getStyle(lowerDiv, "height");
}
// Return a style atribute of an element.
// J/S Pro Techniques p136
function getStyle(elem, name) {
    if (elem.style[name]) {
        return elem.style[name];
    }
    else if (elem.currentStyle) {
        return elem.currentStyle[name];
    }
    else if (document.defaultView && document.defaultView.getComputedStyle) {
        name = name.replace(/([A-Z])/g, "-$1");
        name = name.toLowerCase();
        s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    }
    else {
        return null;
    }
}
</script>
</head>

<body onload="showHeight()">
<p>The height the lower row is currently <span id="info"></span></p>
<table>
<tr id="upper_row" onclick="toggleLower()"><td><p>Click me to toggle the next row.</p></td></tr>
<tr id="lower_row"><td><div id="lower_div"><p>Peekaboo!</p></div></td></tr>
</table>

</body>
</html>

编辑 1:

一个建议的解决方案是将 div 移出页面。我无法让它工作，而且我认为它的高度不正确，因为它的高度取决于表格的宽度。

我正在研究使用visibility:hidden 的解决方案，但它有问题。它仍然占用少量空间，并且报告的高度是错误的。这是该解决方案的示例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table {width: 250px;}
table, td {border: 1px solid black;}
#lower_row {position: absolute; visibility: hidden}
#lower_div {overflow: hidden;}
</style>
<script type="text/javascript">
function toggleLower() {
    lowerRow = document.getElementById("lower_row");
    lowerDiv = document.getElementById("lower_div");
    if (getStyle(lowerRow, "visibility") == "hidden") {
        lowerRow.style.visibility = "visible";
        lowerRow.style.position = "static";
    }
    else {
        lowerRow.style.visibility = "hidden";
        lowerRow.style.position = "absolute";
    }
    showHeight();
}
function showHeight() {
    lowerDiv = document.getElementById("lower_div");
    document.getElementById("info").innerHTML = getStyle(lowerDiv, "height");
}
// Return a style atribute of an element.
// J/S Pro Techniques p136
function getStyle(elem, name) {
    if (elem.style[name]) {
        return elem.style[name];
    }
    else if (elem.currentStyle) {
        return elem.currentStyle[name];
    }
    else if (document.defaultView && document.defaultView.getComputedStyle) {
        name = name.replace(/([A-Z])/g, "-$1");
        name = name.toLowerCase();
        s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    }
    else {
        return null;
    }
}
</script>
</head>

<body onload="showHeight()">
<p>The height the lower row is currently <span id="info"></span></p>
<table>
<tr id="upper_row" onclick="toggleLower()"><td><p>Click me to toggle the next row.</p></td></tr>
<tr id="lower_row"><td><div id="lower_div"><p>This is some long text. This is some long text. This is some long text. This is some long text.</p></div></td></tr>
</table>

</body>
</html>

编辑 2:解决方案

Paul 的回答解决了我的问题:如何找到未显示的元素的高度。但是，它不适用于我的问题。在我的网站上，div 的高度取决于它的宽度，这取决于 td 的宽度，这取决于其他行的状态和表格的宽度，这取决于页面的宽度。这意味着，即使我预先计算了高度，一旦有人展开另一行或更改窗口大小，该值就会出错。此外，复制表格并保留所有这些约束几乎是不可能的。

但是，我找到了解决办法。当用户点击展开一行时，我的网站会按顺序执行以下步骤:

将 div.style.height 设置为 1px。
将 row.style.display 设置为 table-row。
存储 div.scrollHeight 的值。
运行滚动动画，停在 div.scrollHeight。
动画结束后，设置div.style.height为auto。

div.scrollHeight 给出了 div 内容的高度，包括它的溢出。当不显示 div 时它不起作用，但这对我的应用程序来说不是问题。这是实际代码示例。 (同样，我没有包含滚动动画的代码，因为它太长了。)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table, td {border: 1px solid black;}
#lower_row {display: none;}
#lower_div {overflow: hidden;}
</style>
<script type="text/javascript">
function toggleLower() {
    var lowerRow = document.getElementById("lower_row");
    var lowerDiv = document.getElementById("lower_div");
    if (getStyle(lowerRow, "display") == "none") {
        lowerDiv.style.height = "0px";
        lowerRow.style.display = "table-row";
        showHeight();
        lowerDiv.style.height = "auto";
    }
    else {
        lowerDiv.style.height = "0px";
        showHeight();
        lowerRow.style.display = "none";
    }
}
function showHeight() {
    var lowerDiv = document.getElementById("lower_div");
    document.getElementById("info").innerHTML = lowerDiv.scrollHeight;
}
// Return a style atribute of an element.
// J/S Pro Techniques p136
function getStyle(elem, name) {
    if (elem.style[name]) {
        return elem.style[name];
    }
    else if (elem.currentStyle) {
        return elem.currentStyle[name];
    }
    else if (document.defaultView && document.defaultView.getComputedStyle) {
        name = name.replace(/([A-Z])/g, "-$1");
        name = name.toLowerCase();
        s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    }
    else {
        return null;
    }
}
</script>
</head>

<body>
<p>The height the lower row is currently <span id="info">...</span></p>
<table>
<tr id="upper_row" onclick="toggleLower()"><td><p>Click me to toggle the next row.</p></td></tr>
<tr id="lower_row"><td><div id="lower_div"><p>
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
This is some long text. This is some long text. This is some long text. This is some long text.
</p></div></td></tr>
</table>

</body>
</html>

最佳答案

你可以复制带有内容的div，放到绝对定位的body中 top:-10000; left:-10000; 所以它将在可见区域之外，然后你可以计算高度并从 DOM 中删除克隆。

更新

或者，如果您以动态方式添加元素，您可以将其设置为display:block、position:absolute 和visibility:hidden - 但你必须确保它不会改变页面上任何元素的位置。 visibility:hidden - 不会显示元素，但会计算它的尺寸(与 display: none 对比)

更新

在您的特定情况下，您的 parent 会对 child 的尺寸产生影响，因此您需要将您的元素克隆到可见区域之外的“相似”父元素中。说“相似”是指它应该具有相同的尺寸，但一般来说 - 样式以及与其尺寸相关的所有内容:

var wrapper = $('<div></div>').appendTo('body').css('display', 'block').css('position', 'absolute').css('top', -10000).css('left', -10000).css('width', $('table').css('width'));
var clone = $('#lower_div').clone().appendTo(wrapper);    
document.getElementById("info").innerHTML = clone.height();

这里正在工作jsfiddle给你。

关于javascript - 如何找到未显示的元素的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8186889/

文章推荐： git - 你如何为 Jenkins 管道提取 git 提交者信息

文章推荐： android - miui手机如何查看短信权限

文章推荐： android - Firebase 应用中的图像邀请电子邮件 HTML 内容

grails - Cereal ，哥伦。按 parent 找 child ，按 child 找 parent
例如，我有一个父类Author: class Author { String name static hasMany = [ fiction: Book,
javascript - DOJO:找 child
代码如下: dojo.query(subNav.navClass).forEach(function(node, index, arr){ if(dojo.style(node, 'd
mysql - 加入两张 table 找 friend
我有一个带有 Id 和姓名的学生表和一个带有 Id 和 friend Id 的 Friends 表。我想加入这两个表并找到学生的 friend 。例如，Ashley 的 friend 是 Saman
grails - Grails按 child 找 parent
我通过互联网浏览，但仍未找到问题的答案。应该很容易: class Parent { String name Child child } 当我有一个 child 对象时，如何获得它的 paren
android - Firebase Android 找 friend 功能
我正在尝试创建一个以 Firebase 作为我的后端的社交应用。现在我正面临如何(在哪里？)找到 friend 功能的问题。我有每个用户的邮件地址。我可以访问用户的电话也预订。在传统的后端中，我
ios - Apple Game Center 和 Facebook 找 friend iOS6
我主要想澄清以下几点: 1。有人告诉我，在 iOS 5 及以下版本中，如果您使用 Game Center 设置多人游戏，则“查找 Facebook 好友”(如与好友争夺战)的功能不是内置的，因此您需要
docker - 有什么用!意思？找。\! -用户redis -exec chown redis '{}' +
关于redis docker镜像ENTRYPOINT脚本 docker-entrypoint.sh : #!/bin/sh set -e # first arg is `-f` or `--some-

太空狗

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何找到未显示的元素的高度