[JavaScript] 记一次莫名其妙的错误 background-color - 刘傲天

in 默认分类 with 0 comment

莫名其妙的错误

首先看一下源码,去掉了没有意义的部分

<html>
<head>
  <style>
  #div1
  {
    width: 200px;
    height: 200px;
    background-color: yellow;
  }
  </style>
  <script>
    function toBlue(){
      document.getElementById('div1').style.width ='400px';
      document.getElementById('div1').style.height='400px';
      document.getElementById('div1').style.background-color='Blue';
    }
  </script>
</head>
<body>
  <div id = 'div1' onmouseover="toBlue()"></div>
</body>
</html>

这个程序本身要实现的效果是,默认显示一小块黄色的方块,当鼠标放在上边的时候就显示更大的一个蓝色方块,但是这个程序没有达到这样的效果,由于我也不是专业写js的,这是别人的一个报错代码,后来我通过调试发现background-color那里出现的错误,后来一想"-"是css里边的写法,但是在js当中是有加减乘除的,所以这里应该就是出现问题的地方了,但是没有”-“怎么表示这个属性呢,后来查了一下资料
background-color改成了backgroundColor所以其他的一些属性带"-"的应该都是这样修改了。修改后的代码

<html>
<head>
  <style>
  #div1
  {
    width: 200px;
    height: 200px;
    background-color: yellow;
  }
  </style>
  <script>
    function toBlue(){
      document.getElementById('div1').style.width ='400px';
      document.getElementById('div1').style.height='400px';
      document.getElementById('div1').style.backgroundColor='Blue';
    }
  </script>
</head>
<body>
  <div id = 'div1' onmouseover="toBlue()"></div>
</body>
</html>

完美!!!!

Responses