javascript - 更改 CSS“z-index”属性：“分配中的左侧无效”

Question

我有一个带有 onmouseover 事件处理程序的元素，它调用我创建的一个函数，该函数假设更改另一个元素的 css 属性，并且我为该元素提供了 ID“输出”。当我使用 onmouseover 处理程序将鼠标放在元素上时，我收到一个错误：Uncaught ReferenceError: Invalid left-hand side in assignment。我认为我的功能有问题。我无法通过js更改元素的z-index吗？

<!--My Css->
<style>
#output{
height:500px;
width:500px;
border: 1px solid black;
z-index:1;
}
</style>
<!--My Script--> 
<script>
function ChangeZofO () {
document.getElementById("output").style.z-index="-1";
}
</script>

<!--My Html-->
<div id="MyDiv" onmouseover="ChangeZofO()"></div>

Answer 1

Javascript 中的样式名称使用​​ camelCase，所以它应该是：

document.getElementById("output").style.zIndex="-1";

-是算术减法运算符，它不能用于标识符。

Answer 2

您忘记了引号，并且属性名称中不允许使用连字符，因此通常使用驼峰命名法

<script>
function ChangeZofO () {
    document.getElementById("output").style.zIndex = -1;
}
</script>

<div id="MyDiv" onmouseover="ChangeZofO()"></div>