Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.07.2018, 22:06
Новичок на форуме
Отправить личное сообщение для kurganoffiv Посмотреть профиль Найти все сообщения от kurganoffiv
 
Регистрация: 21.07.2018
Сообщений: 6

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 выполняется прежде создания переменной.
В чем подвох? как исправить?
Ответить с цитированием
  #2 (permalink)  
Старый 21.07.2018, 22:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

kurganoffiv,
html и css?
Ответить с цитированием
  #3 (permalink)  
Старый 22.07.2018, 09:16
Новичок на форуме
Отправить личное сообщение для kurganoffiv Посмотреть профиль Найти все сообщения от kurganoffiv
 
Регистрация: 21.07.2018
Сообщений: 6

вот накидал небольшой пример
<!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';
	}
}
Ответить с цитированием
  #4 (permalink)  
Старый 22.07.2018, 10:18
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

kurganoffiv,
вам не left нужен, ширина первого объекта как раз left для второго
Ответить с цитированием
  #5 (permalink)  
Старый 22.07.2018, 10:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 22.07.2018 в 15:09.
Ответить с цитированием
  #6 (permalink)  
Старый 22.07.2018, 15:18
Новичок на форуме
Отправить личное сообщение для kurganoffiv Посмотреть профиль Найти все сообщения от kurganoffiv
 
Регистрация: 21.07.2018
Сообщений: 6

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
.toggle() и position: absolute; saxap Общие вопросы Javascript 8 15.08.2016 13:12
При клике появлялся новый элемент (бесконечно) Eadweard Элементы интерфейса 3 16.02.2016 08:13
position absolute vs static simple Общие вопросы Javascript 2 30.05.2013 02:44
Выравнивание блока с position absolute bayrach (X)HTML/CSS 5 28.10.2011 19:01
Поясните логику событий мыши при дочернем элементе с position absolute... interwass Общие вопросы Javascript 11 22.06.2011 12:42