Форум

kurganoffiv · #1 (**permalink**) 21.07.2018, 22:06

Камрады, 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 выполняется прежде создания переменной.
В чем подвох? как исправить?

рони · #2 (**permalink**) 21.07.2018, 22:30

kurganoffiv,
html и css?

kurganoffiv · #3 (**permalink**) 22.07.2018, 09:16

вот накидал небольшой пример

<!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{
	position: relative;
}

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';
	}
}

j0hnik · #4 (**permalink**) 22.07.2018, 10:18

kurganoffiv,
вам не left нужен, ширина первого объекта как раз left для второго

рони · #5 (**permalink**) 22.07.2018, 10:23

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>

kurganoffiv · #6 (**permalink**) 22.07.2018, 15:18

Господа, спасибо большое за оперативный ответ.
Все варианты имеют место быть. Больше всего подошел вариант Рони.

Форум

Справочник

Discord чат

Курсы javascript