Question

我有一个带三个按钮的简单页面。我想制作一个功能，可以在点击时更改页面的背景颜色。所以我以某种方式使它发挥作用。

我基本上想知道当我在我的changecolor括号中使用它时，“this”到底是什么意思？

我有一种感觉，但我需要更多客观的知识。

我的HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Panel</title>
        <link rel="stylesheet" type="text/css" href="style.css"></link>
        <script src="javascript.js"></script>
    </head>

    <body>
        <h1>THIS IS SOME TEXT</h1>
        <h2>This is some more text</h2>
        <button class="buttons" id="button1" onclick="changecolor(this)">;P</button>
        <button class="buttons" id="button2" onclick="changecolor(this)">;]</button>
        <button class="buttons" id="button3" onclick="changecolor(this)">;)</button>
    </body>     
</html>

我的css：

    h1{
        background-color: blue;
        float: left;
    }

    h2{
        color: blue;
        float:  left;
        width:100%;

    }

    .buttons{
        float:left;
        margin-right: 10px;
        width: 25px;
        height: 25px;

    }

#button1{
    background-color:green;
}

#button2{
    background-color:darkgray;
}

#button3{
    background-color:blue;
}

我的javascript：

function changecolor(clickedButton){

    if(clickedButton.id == "button1"){
        document.body.style.backgroundColor="lightgreen";

    }

    if(clickedButton.id =="button2"){
        document.body.style.backgroundColor="gray";
    }

    if(clickedButton.id =="button3"){
        document.body.style.backgroundColor="lightblue";
    }
}

提前谢谢！

Answer 1

在JavaScript this中始终引用我们所使用的函数的“所有者” 执行，或者更确切地说，是一个函数是一个方法的对象。当我们在页面中定义忠实函数doSomething（）时，它就是 owner是页面，或者说是窗口对象（或全局对象） JavaScript的。但是，onclick属性由HTML元素拥有它属于。

Via- http://www.quirksmode.org/js/this.html

Answer 2

this引用DOM element上发生的event。

在这种情况下，在changecolor()内，clickedButton将引用点击的<button>对象。

Answer 3

它将点击的元素的引用发送到javascript函数。

Answer 4

this指的是按钮元素本身。

Answer 5

这会改变文档正文的背景颜色。 “this”就像在这个按钮或对象中一样

什么＆＃34;这＆＃34;在功能括号中使用？

5 个答案: