OffsetLeft при position - absolute
Камрады, HELLO.
Что есть: div в нем span, который имеет значение left. Значение position для div - relative, для span - не задано. Задача изменить значение position для span на absolute с сохранением текущего положения left. По логике вроде все просто: 1. Получаем текущее значение left; 2. Меняет значение position для span; 3. Устанавливаем значение left для span, которое получили в п. 1 Получился такой не хитрый код var leftPos = elem.offsetLeft; elem.style.position = 'absolute'; elem.style.left = leftPos + 'px'; но когда я устанавливаю position = 'absolute' значение переменной leftPos устанавливается = 0. Если закоментить строку с изменением position, то значения получаю корректные, т.е. действие по изменению position выполняется прежде создания переменной. В чем подвох? как исправить? |
kurganoffiv,
html и css? |
вот накидал небольшой пример
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css.css"> <script src="jsTest.js"></script> </head> <body> <div id="testDIV"> <span>SPAN 1</span> <span>SPAN 2</span> </div> </body> </html> Код:
#testDIV{ window.onload = function(){ var obj = {}; var testDiv = document.querySelector('#testDIV'); var childTestDiv = testDiv.children; for(var i = 0; i < childTestDiv.length; i++){ var leftPos = childTestDiv[i].offsetLeft; childTestDiv[i].style.position = 'absolute'; childTestDiv[i].style.left = leftPos + 'px'; } } |
kurganoffiv,
вам не left нужен, ширина первого объекта как раз left для второго |
span position absolute сохранение положения при смене позиции
kurganoffiv,
offsetLeft надо предварительно закешировать. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #testDIV{ position: relative; } </style> <script> document.addEventListener("DOMContentLoaded", function() { var testDiv = document.querySelector("#testDIV"); var childTestDiv = testDiv.children; [].map.call(childTestDiv, function(child) { var leftPos = child.offsetLeft; child.style.left = leftPos + "px"; return child }).forEach(function(child) { child.style.position = "absolute" }) }); </script> </head> <body> <div id="testDIV"> <span>SPAN 1</span> <span>SPAN 2</span> </div> </body> </html> |
Господа, спасибо большое за оперативный ответ.
Все варианты имеют место быть. Больше всего подошел вариант Рони. |
Часовой пояс GMT +3, время: 13:55. |