javascript - CSS「z-index」プロパティの変更:「代入の左辺が無効です」

Question

別の要素のcssプロパティを変更すると思われる関数を呼び出すonmouseoverイベントハンドラーを持つ要素があり、その要素にID「出力」を与えました。onmouseover ハンドラーのある要素の上にマウスを置くと、次のエラーが表示されます: Uncaught ReferenceError: Invalid left-hand side in assignment. 私の機能に問題があると思います。要素の z-index を js で変更することはできませんか?

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