如何通過在JavaScript中調用函數來更改onclick的顏色？

Question

如果我把this.style.background="#000"; 在div中內聯，比如onclick="this.style.background="#000";它可以工作。但是，如果我把它放在一個函數中並從同一個onclick事件中調用該函數，它就不起作用了。，如果我讓功能做其他事情（比如打開一個警告框），它確實有效。發生了什么事？

這是代碼：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
.tile {
    width: 48px;
    height: 48px;
    margin: 0px;
    padding: 0px;
    float: left;
    background-color:red;
    border: 1px solid black;
}
</style>
</head>

<body>
<div class="tile" onclick="myFunction()"></div>

<script>
function myFunction() {
    this.style.background="#000000";
}
</script>

</body>

</html>

Answer 1

我注意到你包括jQuery。 您應該強烈考慮將標記和JavaScript分開。 如果你確實走了那條路，那就是這樣：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
.tile {
    width: 48px;
    height: 48px;
    margin: 0px;
    padding: 0px;
    float: left;
    background-color:red;
    border: 1px solid black;
}
</style>
</head>

<body>
<div class="tile"></div>

<script>
$(function () {
    $(".tile").click(function () {
        $(this).css('background-color', '#000000');
    });
});
</script>

</body>

</html>

示例： http ： //jsfiddle.net/6zAN7/9/

Answer 2

如果你想這樣做，你需要在調用函數時傳遞DIV元素的引用。 在執行onclick處理程序期間，“this”將引用當前元素。 把它作為一個論點！

這是更正后的代碼：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
.tile {
width: 48px;
height: 48px;
margin: 0px;
padding: 0px;
float: left;
background-color:red;
border: 1px solid black;
}
</style>
</head>

<body>
<div class="tile" onclick="myFunction(this)"></div>

<script>
function myFunction(divObj) {
    divObj.style.background="#000000";
}
</script>

</body>

</html>

Answer 3

<div class="tile" onclick="myFunction(this)"></div>

<script>
function myFunction(x) {
    x.style.background="#000000";
}
</script>

如何通過在JavaScript中調用函數來更改onclick的顏色？

問題描述

3 個解決方案

解決方案1
5 2013-02-17 18:54:39

解決方案2
3 2013-02-17 18:40:13

解決方案3
2 2013-02-17 18:39:37

如何通過在JavaScript中調用函數來更改onclick的顏色？

問題描述

3 個解決方案

解決方案1 5 2013-02-17 18:54:39

解決方案2 3 2013-02-17 18:40:13

解決方案3 2 2013-02-17 18:39:37

解決方案1
5 2013-02-17 18:54:39

解決方案2
3 2013-02-17 18:40:13

解決方案3
2 2013-02-17 18:39:37