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

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

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

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

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

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

Сделайте это путем создания вспомогательного DIV с теми же размерами, что и у желтого DIV. Используйте только JavaScript, без CSS.

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

Исходный документ: tutorial/browser/dom/replaceDiv/2.html.

Решение

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

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

var placeHolder = document.createElement('div')
placeHolder.style.height = div.offsetHeight + 'px'

offsetHeight внешняя высота блока, включая границы, но отступы в ней не учитываются.
'px' - требование CSS-свойства.

Но это еще не всё. У placeHolder нет отступов, поэтому текст сдвигается.

Что ж, давайте получим отступы:

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

var placeHolder = document.createElement('div')
placeHolder.style.height = div.offsetHeight + 'px'

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

placeHolder.style.marginTop = computedStyle.marginTop // полное название свойства
placeHolder.style.marginBottom = computedStyle.marginBottom

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

Конечный результат (смотри SCRIPT):

<!DOCTYPE HTML>
<html>
<head>
<style> 
  #moving-div { 
    border: 5px groove green; 
    padding: 5px; 
    margin: 10px;
    background-color: yellow;
  }
</style>
</head>
<body>

Before Before Before

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

After After After

<script>
var div = document.getElementById('moving-div')

var placeHolder = document.createElement('div')
placeHolder.style.height = div.offsetHeight + 'px'

var computedStyle = div.currentStyle || getComputedStyle(div, null)

placeHolder.style.marginTop = computedStyle.marginTop // full prop name
placeHolder.style.marginBottom = computedStyle.marginBottom

// highlight it for demo purposes 
placeHolder.style.backgroundColor = '#C0C0C0'

document.body.insertBefore(placeHolder, div)

div.style.position = 'absolute'
div.style.right = div.style.top = 0

</script>


</body>
</html>

#229

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

Реклама

Нашли опечатку?

Последние Комментарии

Помоги другим!