Stapelen van elementen met Javascript

Ik heb de volgende code voor het stapelen van elementen en als de cursor op een element wordt geplaatst, komt dat element naar de top. Hier is de code .. Het werkt niet om een ​​of andere reden. De alinea's worden weergegeven, maar bij het verplaatsen van de muis erover gebeurt er niets.

<html>
<head>
<title>Stacking</title>
</script>
<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')">

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

2 antwoord

U kunt z-index niet gebruiken in JavaScript, omdat dit wordt geïnterpreteerd als z min index . Gebruik in plaats daarvan 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;
}

(en merk ook op dat u top niet als globale variabele kunt gebruiken, omdat deze al is gedeclareerd als een readonly-eigenschap, window.top )

7
toegevoegd
oldTopStyle ["z-index"] = "0"; werkt ook.
toegevoegd de auteur Miscreant, de bron

de code

top=document.getElementById(top).id;

zou moeten zijn

top  = newTop;

en zijn

zIndex not z-index
2
toegevoegd