1

注意：我不知道 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>
4

2 回答 2

2

由于您不想学习 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内联事件处理程序代码（在属性中指定）的上下文 () 是作为事件目标的元素 - 在这种情况下，它将是被单击的特定DIV 元素。然后我们简单地将元素传递给回调函数，以便我们可以通用地使用它。

此外，在初始标记中，div 元素没有关闭并导致嵌套。通过更正，上述方法可以完成任务。（小提琴代码直接分配给window.change，但在其他方面是相同的概念。）

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

于 2013-09-08T22:43:54.913 回答
0

这会更容易。

<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 非常简单！:) 但如你所愿。

于 2013-09-08T23:22:47.413 回答