单击时使用Javascript更改CSS颜色(addEventListener）

Change CSS color with Javascript on click (addEventListener)

本文关键字：颜色 addEventListener CSS 更改 Javascript 单击      更新时间：2023-09-26

好吧，我有这个div，我希望它在点击时变成红色。最初它应该显示为黑色。如果你对这个代码进行测试，你会发现一旦你加载页面，它就会变成红色。

如果我去掉click1功能上的参数，它会很好。。。它最初仍然不会是黑色的，但当你点击它时，它至少会变成红色

我在click1上有一个参数，用于将来节省代码行。因为这个代码最终是用来处理多个正方形的。我希望能够用JavaScript更改方块的颜色。我需要它能够区分每个正方形。这样它只会更改您单击的正方形的颜色。我不想为每个方块都做一个新的函数。这就是为什么我把它设置成这样。

所有的HTML、CSS和Javascript都在这里。（提前感谢大家。被代码卡住和沮丧并不有趣。我不知道如果没有这个社区我会怎么做。我只希望我能贡献尽可能多的资源。）

<body>
  <div class="border">
    <div id="box1" style="width: 100px;	height: 100px; backgroundColor: #000000;">
    </div>
  </div>
  <script type="text/javascript">
    var colorcheck = "#cccccc";
    function click1(blockid) {
      document.getElementById("box" + blockid).style.backgroundColor = '#ff0000';
      colorcheck = document.getElementById("box1").style.backgroundColor;
      console.log(colorcheck);
      console.log("box" + blockid);
    };
    document.getElementById("box1").addEventListener("click", click1(1));
  </script>
</body>

如果您想在addEventListener中传递参数，您必须修改您的代码，如下所示。

 document.getElementById("box1").addEventListener("click", function(){click1(1);}, false);

DEMO

我认为您应该给函数引用，而不是在那里执行函数：

document.getElementById("box1").addEventListener("click", click1);
//-------------------------------------------------------------^

不要在那里"调用"函数。

试试这个。。

$('#box1').click(function(){
    $('.border #box1').css('background-color', 'red').css('color', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <div class="border">
        <div id="box1" style="width: 100px; height: 100px; backgroundColor: #000000;">
        </div>

正如其他人已经提到的，您的第二个addEventListener参数中存在问题。

你可以看看这个例子：

var colorcheck = "#cccccc";
function click1() {
  document.getElementById(this.id).style.backgroundColor = '#ff0000';
  colorcheck = document.getElementById("box1").style.backgroundColor;
  console.log(colorcheck);
  console.log(this.id);
};
document.getElementById("box1").addEventListener("click", click1);
<div class="border">
  <div id="box1" style="width: 100px; height: 100px; background-color: #000000;"></div>
</div>

PS：看看box1的样式属性。是background-color而不是backgroundColor。第二个仅适用于JavaScript。

正如我所评论的，document.getElementById("box1").addEventListener("click", click1(1))是个问题。此外，您可以使用this来代替传递数字click1(1)。

你可以试试这样的东西：

代码

var colorcheck = "#cccccc";
function click1(blockid) {
  var self = this;
  self.style.backgroundColor = '#ff0000';
  colorcheck = self.style.backgroundColor;
  console.log(colorcheck);
  console.log("box" + blockid);
};
function registerEvents(){
  var box = document.getElementsByClassName("box");
  for(var i = 0; i<box.length; i++){
    box[i].addEventListener("click", click1);
  }
}
registerEvents();
.box {
  width: 100px;
  height: 100px;
  background: black;
  margin:5px;
}
<body>
  <div class="border">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
  </div>
</body>

您可以在div 上单击

<div id="box1" style="width: 100px; height: 100px; backgroundColor: #000000;"  onclick="click1(1)">

并从脚本中删除自动绑定器：

document.getElementById("box1").addEventListener("click", click1(1));

或者你可以使用jQuery，whitch使用起来更优雅：

下面是一个例子

$('body').on('click', '.box', function() {
        var caller = $(this);
  if(caller.hasClass('select-box') == true) {
    caller.removeClass('select-box');
  } else {
    caller.addClass('select-box');
  }

})；

您只需要在HTML中添加点击事件

<div onclick="click1()" id="box1" style="width: 100px; height: 100px; backgroundColor: #000000;">

并删除document.getElementById("box1").addEventListener("click", click1(1));

相关文章：