Javascriptを使用した要素の積み上げ

要素の積み重ねとその要素が上に来るようにカーソルを置くと、次のようなコードができます。ここにコードがあります。何らかの理由で動作しません。段落が表示されますが、マウスを動かすと何も起こりません。それはz minus indexとして解釈されますので、Javascriptを使用した要素の積み上げ

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

出典

2011-11-11 vivek241

あなたは、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; 
}

（そしてまた、それはすでにReadOnlyプロパティ、window.topとして宣言されているので、あなたは、グローバル変数としてtopを使用することはできませんのでご注意）

出典

2011-11-11 17:58:13

'oldTopStyle [" z-index "] =" 0 ";'も動作します。 – Miscreant

コード

top=document.getElementById(top).id;

は

する必要があります

top = newTop;

およびその

zIndex not z-index

出典

2011-11-11 17:59:21

Javascriptを使用した要素の積み上げ

答えて

関連する問題