Question

我正在尝试将段落叠加在一起。当我鼠标悬停时，我想要显示该特定段落。但我收到了错误：

Uncaught ReferenceError: Invalid left-hand side in assignment

JS：

var topLayer = "p3";


function moveIt(toTop)
{
    var oldTop = document.getElementById(topLayer).style;
    var newTop = document.getElementById(toTop).style;

    oldTop.z-index = "0";
    newTop.z-index = "10";

    topLayer = document.getElementById(toTop).id;
}

HTML：

<html>
<head>
    <title>Text of Stacked Paragraph</title>
    <link rel="stylesheet" href="stacked.css" type="text/css">
    <script type="text/javascript" src="stacked.js"></script>
</head>
<body>
    <p id="p1" class="para1" onmouseover="moveIt('p1')">
        This is one of the paragraphs. 
    </p>
    <p id="p2" class="para2" onmouseover="moveIt('p2')">
        Another paragraph.
    </p>
    <p id="p3" class="para3" onmouseover="moveIt('p3')">
        More paragraph.
    </p>
</body>

我在哪里做错了？

Answer 1

DOM元素的z-index属性是通过zIndex设置的：

var topLayer = "p3";

function moveIt(toTop) {
    var oldTop = document.getElementById(topLayer).style;
    var newTop = document.getElementById(toTop).style;

    oldTop.zIndex = "0";
    newTop.zIndex = "10";

    topLayer = document.getElementById(toTop).id;
}

Jsfiddle示例：http://jsfiddle.net/d4LLfs6e/1/

JavaScript函数未定义错误onmouseover

1 个答案: