Ändern Hintergrundfarbe der Schaltfläche mit JavaScript

Question

Ich schreibe eine HTML-Web-Seite, ich benutze eine Schaltfläche und ich muss seine Hintergrundfarbe bei Mouseover mit einer Javascript-Funktion ändern. Hier ist der Code.

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

Answer 1

In JavaScript müssen Sie Handler Element x z.B .:

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

bekommen, aber Sie sollten dies mit CCS tun:

button{ 
    background-color: yellow; 
} 

button:hover{ 
    background-color: lime; 
} 

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

Answer 2

Das ist sehr einfach. Sie vermissen das Schlüsselwort function, und mit dieser Art des Zugriffs auf Eigenschaften müssen Sie camel case verwenden. Wickeln Sie das Farbhex schließlich in Anführungszeichen.

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

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

Die empfohlene Methode ist in der Produktion Verwendung CSS, aber wenn Sie nur in JavaScript sind und erforschen wollen, es ist in Ordnung.

Answer 3

Wenn Sie in js:

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

Answer 4

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

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

Answer 5

Sie können dies einfach in CSS, ist es einfach, effizient und weniger Code.

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

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