3

如果我将this.style.background="#000";inline 放在 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>
4

3 回答 3

5

我注意到你包括 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/

于 2013-02-17T18:54:39.817 回答
3

如果您想这样做，则需要在调用函数时传递 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>
于 2013-02-17T18:40:13.347 回答
2 
<div class="tile" onclick="myFunction(this)"></div>

<script>
function myFunction(x) {
    x.style.background="#000000";
}
</script>
于 2013-02-17T18:39:37.837 回答