Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.05.2014, 12:25
Аспирант
Отправить личное сообщение для jule Посмотреть профиль Найти все сообщения от jule
 
Регистрация: 23.02.2013
Сообщений: 57

Расстояние между дочерними элементами
Доброго времени суток. В функции f() в качестве параметра указывается расстояние между дочерними элементами элеменета menu. По идее, складывается со space width и left [0] - элемента. Потом, их сумма подставляется в left [1] элемента и т.д. Проблема вся в том, что после вычислений внесения суммы в left [1] - элемента, она же вносится во все остальные. Что делать?

...
<style type="text/css">
.link{
position:absolute;
border:1px solid #000000;
width:100px;
}
</style>
<body>
<div id="menu"><div class="link">First</div><div class="link">Second</div><div class="link">Third</div></div>
<script type="text/javascript">

function f(space){
	var i = 0;
	while(document.getElementById("menu").children.length > i+1){
		var w = document.getElementById("menu").children[i].style.width;
		var l = document.getElementById("menu").children[i].style.left;
		var wl = parseInt(w + l);
		i++;
		document.getElementById("menu").children[i].style.left = wl + space;
	}
}
f(15);

</script>
</body>
Ответить с цитированием
  #2 (permalink)  
Старый 30.05.2014, 13:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,294

jule,
если width известна зачем её получать способом который не даст результата ,также и с left.
http://learn.javascript.ru/styles-an...-currentstyle
<!DOCTYPE HTML>
<html>

<head>
  <title>Untitled</title>
</head>

<body>
<style type="text/css">
.link{
position:absolute;
border:1px solid #000000;
width:100px;
}
</style>

<div id="menu"><div class="link">First</div><div class="link">Second</div><div class="link">Third</div></div>
<script>
   function f(space){
	var i = 0,
    len = document.getElementById("menu").children.length , w = 100;
    for (var i=0; i<len; i++)  {
       document.getElementById("menu").children[i].style.left = (w + space)* i + "px";
    }
}
f(15);
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 30.05.2014, 13:37
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

Почему нельзя сделать вот так?

<style>
.link{
    border:1px solid #000000;
    width:100px;
    margin-right: 15px;
    display: inline-block;
}

.last {
    margin-right: 0;
}
</style>
<div id="menu">
    <div class="link">First</div>
    <div class="link">Second</div>
    <div class="link last">Third</div>
</div>

Последний раз редактировалось WorM32, 30.05.2014 в 13:39.
Ответить с цитированием
  #4 (permalink)  
Старый 30.05.2014, 14:20
Аспирант
Отправить личное сообщение для jule Посмотреть профиль Найти все сообщения от jule
 
Регистрация: 23.02.2013
Сообщений: 57

рони, мне нужно каждый раз её получать, т.к. она может изменится в любой момент. И у каждого элемента она может быть другая, т.к. помимо класса в элементе могут добавить id и указать другую ширину у этого id
Ответить с цитированием
  #5 (permalink)  
Старый 30.05.2014, 14:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,294

jule,
по ссылке выше смотрите как получить значение width
Ответить с цитированием
  #6 (permalink)  
Старый 30.05.2014, 14:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,294

jule,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
<style type="text/css">
.link{
position:absolute;
border:1px solid #000000;
width:100px;
}
</style>
<div id="menu"><div class="link">First</div><div class="link">Second</div><div class="link">Third</div></div>
<script>
   function f(space){
	var i = 0,  divs = document.querySelectorAll('.link');
    len = divs.length , w = 0;
    for (var i=0; i<len; i++)  {
      var elem = divs[i], computedStyle = window.getComputedStyle ? getComputedStyle(elem, '') : elem.currentStyle;
       elem.style.left = w + (space* i) + "px";
       w += parseFloat(computedStyle.width);
    }
}
f(15);
</script>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Возможно ли вставить элемент между элементами, создаваемыми ng-repeat? LittlePony Angular.js 3 08.01.2014 15:59
Переход между элементами выпадающего меню Digan jQuery 3 10.10.2012 21:03
Как отловить для всего документа переход фокуса между элементами. Nominus umbra Общие вопросы Javascript 2 28.04.2010 02:33
Как можно изменить расстояние между панелями overlay и filmstrip в фотогалереи? Honey jQuery 0 29.06.2009 10:16
Фиксированное минимальное расстояние между элементами AlexMak (X)HTML/CSS 0 16.12.2008 11:39