Прочитать scrollHeight div с отображением: none parent

Ответ 1

Каков размер элемента при display:none? 0px на 0px

Элемент не отображался и не рисовался нигде на экране, поэтому он действительно занимает нулевое пространство. Сложно ответить на вопрос, было ли видно, сколько места он будет занимать, потому что точно ответить на него означает превратить гипотетическую реальность в реальность. Нам нужно было бы на самом деле сделать его, чтобы получить надежную оценку его размера.

Вообще говоря, это включает в себя либо:

1. Переключение - быстро сделать элемент видимым, проверить высоту и восстановить обратно

   При переключении вы можете сделать видимым и отменить между циклами рисования, но нет никакой гарантии. Особенно, если элемент, который вы хотите измерить, глубоко вложен в скрытого родителя.

2. Клонирование - эмулируйте свойства элемента как можно лучше и рендеринг за пределы экрана

   При клонировании размеры элемента основаны на большом количестве других элементов и свойств, окружающих его. В зависимости от сложности вашей страницы, также нет гарантии, что создание элемента вне экрана приведет к тем же точным размерам, что и оригинал.

Есть несколько решений, изложенных в следующих вопросах, но большинство из них следуют этой базовой схеме:

• Нужно найти высоту скрытого div, установленного для display:none
• Получить размер элемента внутри display:none родитель
• Проверьте, видим ли элемент в DOM

Есть также библиотека с именем jQuery.Actual (2,4 КБ), которая абстрагирует некоторые из этих работ:

Вот их собственная демонстрационная страница, а также фрагмент стека:

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>

Ответ 2

Вам нужно установить dispaly: свойство block для родительского div. И после получения scrollheight с помощью $(element) [0].scrollHeight вы можете установить отображение: none для основного div.

Таким образом, ваш код будет

$('#mainDiv').show();
// Dump html to div
// Read height
var heightOfDiv = $('#mainDiv')[0].scrollHeight
// Hide the div
$('#mainDiv').hide();

Ответ 3

Нет, к сожалению, это невозможно.

Я предлагаю вам прочитать эти ссылки: MDN | Дисплей или статья из номенклатуры, которые вызывают понятие доступности и видимости 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>

Ответ 4

Элемент с display: none не только не будет отображаться, но и не будет обрабатываться DOM-деревом. Вот почему scrollHeight будет 0.

В противном случае с помощью visibility: hidden элемент не будет виден, однако его пространство будет зарезервировано в DOM. Так что у него будет scrollHeight, отличный от 0.

Затем, чтобы прочитать свойство и сохранить элемент скрытым, вы можете использовать $('#elementId').prop('visibility','hidden'); $('#elementId').prop('scrollHeight') $('#elementId').prop('visibility','hidden'); $('#elementId').prop('scrollHeight').