个人中心
gpt4 book ai didi

javascript - 从 javascript 事件设置 CSS

转载 作者：行者123 更新时间：2023-11-28 09:05:31 25 4
gpt4 key购买 nike

我刚开始使用 javascript，我正在尝试做一个简单的示例，但是根据 div 元素的 onmouseover 和 onmouseout 更改 div 的 CSS。

我的测试是创建一个绿色框。当我将鼠标悬停在它上面时，它应该变成蓝色。当我鼠标移开时，它应该变回绿色。

这是我的来源:

<html>
<head>
<title>TEST</title>
<style>
    #box {
        width: 30px;
        height: 30px;
        background-color: green;
    }
</style>
<script type="text/javascript">

function setBlue(){
    document.getElementById("box").style.background-color = "blue";
}

function setGreen(){
    document.getElementById("box").style.background-color = "green";
}
</script>
</head>
<body>

<div id="box" onmouseover="setBlue()" onmouseout="setGreen()" />
</body>
</html>

当页面加载时显示绿色框，但是当我将鼠标悬停在上面时没有任何反应。

最佳答案

style.background-color 应该是 style.backgroundColor

<html>

<head>
  <title>TEST</title>
  <style>
    #box {
      width: 30px;
      height: 30px;
      background-color: green;
    }
  </style>
  <script type="text/javascript">
    function setBlue() {
      document.getElementById("box").style.backgroundColor = "blue";
    }

    function setGreen() {
      document.getElementById("box").style.backgroundColor = "green";
    }
  </script>
</head>

<body>

  <div id="box" onmouseover="setBlue()" onmouseout="setGreen()" />
</body>

</html>

关于javascript - 从 javascript 事件设置 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26724504/

25 4 0
文章推荐： css - IE7 绝对元素出现在相对元素后面
文章推荐： javascript - Highcharts - 为什么日期时间轴上的列如此窄？
文章推荐： css - Internet Explorer 8 如何支持 CSS outline 属性？
文章推荐： html - JQM 内容中 div 容器周围的额外空间
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com