使用JavaScript更改按钮的背景色

Question

I'm writing a HTML webPage, I use a button and I need to change his background-color on mouseover using a javascript function. Here is the code.

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

Answer 1

In JavaScript you need get handler to element x eg:

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

but you should do this with CCS:

button{
    background-color: yellow;
}

button:hover{
    background-color: lime;
}

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

Answer 2

This is very basic. You're missing keyword function , and with that style of accessing properties, you need to use camel case. Finally, wrap the color hex within quotes.

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

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

The recommended way is use CSS in production, but if you're just into JavaScript and want to explore, it's fine.

Answer 3

If you want in 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

You can do this simply in CSS, its easy, efficient and less code.

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

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