Блог

Главная - Вопросы по программированию - Укладка элементов с использованием Javascript

Укладка элементов с использованием Javascript

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть следующий код для укладки элементов, и при наведении курсора на элемент этот элемент оказывается вверху. Вот код.. По какой-то причине это не работает. Абзацы отображаются, но при наведении на них курсора мыши ничего не происходит.

 <html>
<head>
<title>Stacking</title>
</script>
<style type="text/css">
.layer1Style
{
position: absolute;
top:50pt;
left:50pt;
background-color:red;
z-index:0;
}
.layer2Style
{
position: absolute;
top:75pt;
left:75pt;
background-color:green;
z-index:0;
}
.layer3Style
{
position: absolute;
top:100pt;
left:100pt;
background-color:blue;
z-index:10;
}
</style>

<script type="text/javascript">
var top="layer3";

function mover(newTop)
{
var oldTopStyle=document.getElementById(top).style;
var newTopStyle=document.getElementById(newTop).style;
oldTopStyle.z-index="0";
newTopStyle.z-index="10";
top=document.getElementById(top).id;
}
</script>
</head>

<body>
<div class="layer1Style" id="layer1" onmouseover="mover('layer1')">
<p>This is my first paragraph</p>
</div>
<div class="layer2Style" id="layer2" onmouseover="mover('layer2')">
<p>This is my second paragraph</p>
</div>
<div class="layer3Style" id="layer3" onmouseover="mover('layer3')">
<p>This is my third paragraph</p>
</div>
</body>
</html>

Ответ №1:

Вы не можете использовать z-index в JavaScript, потому что это интерпретируется как z minus index . Используйте zIndex вместо этого.

 function mover(newTop)
{
    var oldTopStyle = document.getElementById(top).style;
    var newTopStyle = document.getElementById(newTop).style;
    oldTopStyle.zIndex = "0";  // "zIndex", not "z-index"
    newTopStyle.zIndex = "10"; // "zIndex", not "z-index"
    top = document.getElementById(top).id;
}

(и также обратите внимание, что вы не можете использовать top в качестве глобальной переменной, поскольку она уже объявлена как свойство, доступное только для чтения, window.top )

Ответ №2:

код

 top=document.getElementById(top).id;

должно быть

 top  = newTop;

и его

 zIndex not z-index