Расстояние между дочерними элементами
Доброго времени суток. В функции 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> |
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>
|
Почему нельзя сделать вот так?
<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>
|
рони, мне нужно каждый раз её получать, т.к. она может изменится в любой момент. И у каждого элемента она может быть другая, т.к. помимо класса в элементе могут добавить id и указать другую ширину у этого id
|
jule,
по ссылке выше смотрите как получить значение width |
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>
|
| Часовой пояс GMT +3, время: 14:07. |