Javascriptを使用した要素の積み重ね

私は要素を積み重ね、その要素が上に来るようにカーソルを要素に重ねるための次のコードを持っています。 ここにコードです..それは何らかの理由で動作していません。段落が表示されますが、マウスを動かすと何も起こりません。

<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
追加された
ビュー: 1

2 答え

z-index と解釈されるため、JavaScriptでは z-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

7
追加された
oldTopStyle ["z-index"] = "0"; も機能します。
追加された 著者 Miscreant,

コード

top=document.getElementById(top).id;

すべきである

top  = newTop;

とその

zIndex not z-index
2
追加された