使用JavaScript更改按钮的背景颜色

Question

我正在编写HTML网页，我使用按钮，我需要使用javascript函数在鼠标悬停时更改背景颜色。 这是代码。

<button onmouseover="funzione(this)">BTN</button>
<script>
    funzione(x){
        x.style.background-color=#ffffff;
    }
</script>

Answer 1

在JavaScript中，您需要获取元素x的处理程序，例如：

var x = document.getElementById("x");

但你应该用CCS做到这一点：

button{
    background-color: yellow;
}

button:hover{
    background-color: lime;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

Answer 2

这是非常基本的。您缺少关键字function，并且使用这种访​​问属性的方式，您需要使用驼峰大小写。最后，将颜色十六进制包装在引号内。

function funzione(x){
   x.style.backgroundColor= '#ffffff';
}

<button onmouseover="funzione(this)">BTN</button>

推荐的方法是在制作中使用CSS，但是如果你只是使用JavaScript并且想要探索，那就没关系。

Answer 3

如果你想要在js：

<button onmouseover="set_color(this)">BTN</button>
<script>
function set_color(x){
	x.style.backgroundColor='red';
}
</script>

Answer 4

function funzione(x){
  x.style.backgroundColor = "#ffffff";
}

<button onmouseover = "funzione(this)">BTN</button>

Answer 5

你可以在CSS中简单，高效且少编码。

<style type="text/css">
.myHoverButton:hover { background-color: #ffffff; }
</style>

<button id="button1" class="myHoverButton">