14

使用隐藏div的父元素中的元素。divdisplay:none

  • 我将 jQuerytextarea元素转储到控制台。我看到scrollHeight第 0 个元素的属性是88.
  • 我尝试将此属性读取到 var （使用$(element)[0].scrollHeightor$(element).prop('scrollHeight')并且我得到0.

我还尝试在读取之前设置textareatoposition: absolute和display: blockjQuery，结果相同。

如何正确读取属性？

4

4 回答 4

6

什么时候元素的大小是display:none多少？经过0px 0px

该元素尚未在屏幕上的任何位置渲染或绘制，因此它真正占据了零像素的空间。如果它是可见的，它会占用多少空间这个问题很难回答，因为准确地回答它意味着将假设变为现实。我们需要实际渲染它以获得对其大小的可靠测量。

一般来说，这包括：

  1. 切换- 快速使元素可见、检查高度并恢复

    切换时，您可能可以在绘制周期之间显示和撤消，但不能保证。特别是如果您要测量的元素深深嵌套在隐藏的父元素中。

  2. 克隆- 尽可能模拟元素的属性并在屏幕外渲染

    克隆时，元素的尺寸基于大量其他元素和围绕它的属性。根据页面的复杂性，也不能保证在屏幕外创建元素会产生与原始元素完全相同的尺寸。

以下问题中列出了几种解决方案，但大多数都遵循该基本模式：

还有一个名为jQuery.Actual (2.4KB) 的库，它抽象了其中的一些工作：

这是他们自己的Demo Page和Stack Snippet：

console.log("width: ", $("#inner").actual("width"))
console.log("height: ", $("#inner").actual("height"))
#outer, #inner {
  margin: 10px;
  padding: 10px;
}
#outer {
  background: #d1e3ef;
}
#inner {
  background: #9ebae9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.actual/1.0.19/jquery.actual.min.js"></script>

<div id="outer" style="display:none">
  <code>#outer</code>
  <div id="inner">
    <code>#inner</code>
  </div>
</div>

例子

于 2019-01-03T23:17:37.733 回答
3

您需要为父 div 设置 dispaly:block 属性。在使用 $(element)[0].scrollHeight 获取滚动高度后，您可以将 display:none 设置为主 div。

所以你的代码将是

$('#mainDiv').show();
// Dump html to div
// Read height
var heightOfDiv = $('#mainDiv')[0].scrollHeight
// Hide the div
$('#mainDiv').hide();
于 2013-09-20T11:59:47.857 回答
2

display: none不仅不会显示，而且不会被 DOM 树处理的元素。这就是 scrollHeight 为 0 的原因。

否则，使用visibility: hidden，该元素将不可见，但是它将在 DOM 中保留其空间。所以它会有一个不同于 0 的 scrollHeight。

然后，要读取属性并隐藏元素，您可以使用$('#elementId').prop('visibility','hidden'); $('#elementId').prop('scrollHeight').

于 2019-01-08T23:42:47.797 回答
1

不，很遗憾这是不可能的。

我建议您阅读以下链接：MDN | 来自 nomensa的Display或Article ，它唤起了 DOM 可访问性和可见性的概念。事实上，如果你把一个元素放到 " display: none" 中，它是不可见的，并且会退出DOM 可访问性树。但是，有一些技术可以让您使 DOM 元素完全不可见并且不再被认为存在于 DOM 上。

那么显然有一些你应该知道的技巧

第一个如果你想完全mask your parent div without worrying about its dimensions，我建议下面的代码。clip 属性正在贬值，但没有它，它仍然会隐藏我们的项目。

console.log(document.getElementById('child').scrollHeight);
.hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
  z-index: -1;
}
<div class="hidden parent" href="#main">
  I am ignored by the DOM
  <div id="child">I am child</div>
</div>
<span style="color:red">I am the N°1</span>

否则，如果你愿意to keep the dimensions of your parent div，你可以将它浮出 DOM 流。

console.log(document.getElementById('child').scrollHeight);
.hidden {
	height: auto;
  width: auto;
  visibility: hidden;
	position: absolute;
  z-index: -1;
}
<div class="hidden parent" href="#main">
  I am ignored by the DOM
  <div id="child">I am child</div>
</div>
<span style="color:red">I am the N°1</span>

我希望这个答案会有所帮助。

于 2019-01-03T23:44:15.533 回答