HTML中使用JS函数通过id调用div，但一直显示（）is not a function

<style>
body{
    background-color:#B0B0B0
    }
.header{
    background-color:#000000;
    width:100%;
    height:100px;
    }
#left{
    background-color:#FF0000;
    width:15%;
    height:700px;
    }
</style>
</head>

<body >
<div class="header"></div>
<div id="left" onmouseover="hidden()"></div>
<script>

    function hidden(){
        document.getElementById("left").style.backgroundColor="#FFFFFF";
        }
</script>
</body>

```Uncaught TypeError: hidden is not a function
onmouseover @ index.html:26

图片说明
hidden为保留关键字，不能作为变量名。修改变量名即可，

 <style>
body{
    background-color:#B0B0B0
    }
.header{
    background-color:#000000;
    width:100%;
    height:100px;
    }
#left{
    background-color:#FF0000;
    width:15%;
    height:700px;
    }
</style>
</head>

<body >
<div class="header"></div>
<div id="left" onmouseover="hidden1()"></div>
<script>

    function hidden1(){
        document.getElementById("left").style.backgroundColor="#FFFFFF";
        }
</script>
</body>

在谷歌调试后结果：
图片说明

head标签少了前半部分；

body{ background-color:#B0B0B0 } .header{ background-color:#000000; width:100%; height:100px; } #left{ background-color:#FF0000; width:15%; height:700px; }

function hidden(){ document.getElementById("left").style.backgroundColor="#FFFFFF"; }

这样加一个head就没有问题了

body{ background-color:#B0B0B0 } .header{ background-color:#000000; width:100%; height:100px; } #left{ background-color:#FF0000; width:15%; height:700px; }

function hidden(){ document.getElementById("left").style.backgroundColor="#FFFFFF"; }

要成对出现

在style标签前面添加一个head标签

将脚本代码放到调用前面

body{ background-color:#B0B0B0 } .header{ background-color:#000000; width:100%; height:100px; } #left{ background-color:#FF0000; width:15%; height:700px; } function hidden(){ document.getElementById("left").style.backgroundColor="#FFFFFF"; }

将脚本代码放到调用前面

 <style>
body{
    background-color:#B0B0B0
    }
.header{
    background-color:#000000;
    width:100%;
    height:100px;
    }
#left{
    background-color:#FF0000;
    width:15%;
    height:700px;
    }
</style>
<script>

    function hidden(){
        document.getElementById("left").style.backgroundColor="#FFFFFF";
        }
</script>
</head>

<body >
<div class="header"></div>
<div id="left" onmouseover="hidden()"></div>

</body>

图片说明
函数名用错了，换一个就可以了，还有好多保留字的，具体在这里
http://www.runoob.com/js/js-reserved.html

另外你的代码写的不太完整

 <html>
    <head>
        <style>
        body{
        background-color:#B0B0B0
        }
        .header{
        background-color:#000000;
        width:100%;
        height:100px;
        }
        #left{
        background-color:#FF0000;
        width:15%;
        height:700px;
        }
        </style>
    </head>
    <body >
        <div class="header"></div>
        <div id="left" onmouseover="hiddenColor()"></div>
        <script>
        function hiddenColor(){
        document.getElementById("left").style.backgroundColor="#FFFFFF";
        }
        </script>
    </body>
</html>

hidden是dom对象属性（true/false）标记dom是否隐藏，由于作用域问题会先从this（就是dom）对象找hidden属性或者方法，由于存在hidden属性，不是方法，你当方法执行就会报错了

改为直接调用window作用域下的hidden方法，或者你换个函数名就行。

 <div id="left" onmouseover="alert(this.hidden);window.hidden()"></div>

1.可能是hidden关键字引起的