Форум

jule · #1 (**permalink**) 30.05.2014, 12:25

Доброго времени суток. В функции 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

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>

WorM32 · #3 (**permalink**) 30.05.2014, 13:37

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

<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>

jule · #4 (**permalink**) 30.05.2014, 14:20

рони, мне нужно каждый раз её получать, т.к. она может изменится в любой момент. И у каждого элемента она может быть другая, т.к. помимо класса в элементе могут добавить id и указать другую ширину у этого id

рони · #5 (**permalink**) 30.05.2014, 14:29

jule,
по ссылке выше смотрите как получить значение width

рони · #6 (**permalink**) 30.05.2014, 14:39

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>

Форум

Справочник

Discord чат

Курсы javascript