Question

注意：我不知道jQuery所以请不要给我一个如何使用jQuery来解答的答案。

我有多个div。我想知道如何在使用JavaScript点击时访问它并更改其特定颜色。

我不是在寻找像document.getElementsByTagName("div")[0]这样的解决方案，因为它需要为每个div输入一个单独的数字。

我希望有一个像这样的简单解决方案。

<div onClick="change();"><h1>Hi</h1><div>
<div onClick="change();"><h1>Hi</h1><div>       
<div onClick="change();"><h1>Hi</h1><div>   

<script>
        function change(){
            this.style.backgroundColor = "red";
        }
</script>

Answer 1

由于您不想学习jQuery（或者可能是非内联事件），请考虑：

<div onclick="change(this)"><h1>Hi Dave!</h1></div>   <!-- use closing tags -->
<div onclick="change(this)"><h1>Hi Thomas!</h1></div>   

function change(elm) {
    elm.style.backgroundColor = 'red'
}

请注意，内联事件处理程序代码的上下文（this）（在属性中指定）是作为事件目标的元素 - 对于这种情况，它将是特定的< / em>单击的DIV元素。然后我们简单地将元素传递给回调函数，以便我们可以一般地使用它。

此外，在初始标记中，div元素未关闭并导致嵌套。通过更正，above approach works完成任务。（小提琴代码直接分配给window.change，但它是相同的概念。）

当然，学习jQuery（或不同的）高级框架可能会很快得到回报。使用内联事件处理程序是非常“老派”。

Answer 2

这会更容易。

<div onclick="changeColor(this)">Some text!</div>
<p>A paragraph, that will have no change by click</p>

对于JavaScript，请写下：

function changeColor(div) {
  div.style.backgroundColor = #hexvalue
}

这将更改div的背景颜色，而不是<p>。您可以使用此jQuery代码为任何元素设置任何css值。

然而，对我来说，jQuery非常简单！ :)但是如你所愿。

如何在单击时更改特定div的背景

2 个答案: