Вернуться к уроку

Подменить div на другой с таким же размером

важность: 3

Нам нужно создать div с такими же размерами и вставить его на место «переезжающего».

Один из вариантов – это просто клонировать элемент.

Если делать это при помощи div.cloneNode(true), то склонируется все содержимое, которого может быть много. Обычно нам это не нужно, поэтому можно использовать div.cloneNode(false) для клонирования элемента со стилями, и потом поправить его width/height.

Можно и просто создать новый div и поставить ему нужные размеры.

Всё, кроме margin, можно получить из свойств DOM-элемента, а margin – только через getComputedStyle.

Причём margin мы обязаны поставить, так как иначе наш элемент при вставке будет вести себя иначе, чем исходный.

Код:

var div = document.getElementById('moving-div');

var placeHolder = document.createElement('div');
placeHolder.style.height = div.offsetHeight + 'px';
// можно и width, но в этом примере это не обязательно

// IE || другой браузер
var computedStyle = div.currentStyle || getComputedStyle(div, '');

placeHolder.style.marginTop = computedStyle.marginTop; // (1)
placeHolder.style.marginBottom = computedStyle.marginBottom;

В строке (1) использование полного название свойства "marginTop" гарантирует, что полученное значение будет корректным.

Открыть решение в песочнице.

Посмотрим следующий случай из жизни. Был текст, который, в частности, содержал div с зелеными границами:

<style>
  #moving-div {
    border: 5px groove green;
    padding: 5px;
    margin: 10px;
    background-color: yellow;
  }
</style>

Before Before Before

<div id="moving-div">
Text Text Text<br>
Text Text Text<br>
</div>

After After After

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

var div = document.getElementById('moving-div');
div.style.position = 'absolute';
div.style.right = div.style.top = 0;

Побочным результатом явилось смещение текста, который раньше шел после DIV. Теперь он поднялся вверх:

Допишите код Валеры, сделав так, чтобы текст оставался на своем месте после того, как DIV будет смещен.

Сделайте это путем создания вспомогательного DIV с теми же width, height, border, margin, padding, что и у желтого DIV.

Используйте только JavaScript, без CSS.

Должно быть так (новому блоку задан фоновый цвет для демонстрации):

Открыть песочницу для задачи.