Fatal编程技术网
  • javascript/
  • Javascript 使用click事件处理程序更改元素的颜色

Javascript 使用click事件处理程序更改元素的颜色

javascript html css

Javascript 使用click事件处理程序更改元素的颜色,javascript,html,css,Javascript,Html,Css,我想在单击时将框从白色更改为红色，反之亦然。问题在于如何实现盒子的颜色。我想我已经很接近了，但在这条线上的某个地方，我缺少了一个函数或循环 <!DOCTYPE html> <html onmousedown='event.preventDefault();'> <head> <title> Boxes </title> <meta charset='utf-8'> <style> table { border

我想在单击时将框从白色更改为红色，反之亦然。问题在于如何实现盒子的颜色。我想我已经很接近了，但在这条线上的某个地方，我缺少了一个函数或循环

<!DOCTYPE html>
<html onmousedown='event.preventDefault();'>
<head>
<title> Boxes </title>
<meta charset='utf-8'>
<style>

table {
 border-spacing: 6px;
 border: 1px rgb(#CCC);
 margin-top: .5in;
 margin-left: 1in;
 }

td {
 width: 40px; height: 40px; 
 border: 1px solid black;
 cursor: pointer;
 }

</style>


盒
桌子{
边界间距：6px；
边框：1个rgb（#CCC）；
边缘顶部：.5in；
左边距：1英寸；
}
运输署{
宽度：40px；高度：40px；
边框：1px纯黑；
光标：指针；
}
在每个td上，我想将背景颜色设置为白色，并添加一个click事件处理程序以在红色和白色之间切换颜色。在创建事件处理程序时，我想使用匿名函数，在函数内部，关键字“this”指的是元素本身，因此“this.style.backgroundColor”将是元素的背景色。在这里，我认为我对颜色进行了格式化，要么是错误的，要么是错误的。我不确定如何使用“this:函数”来实现这一点

<script>
function colorize(el){
  var
   r = (255, 0, 0 ),
   w = (255, 255, 255 );
   if (event.onmousedown) {
    r.style.backgroundColor = "255, 0, 0" ;
   } else {
    w.style.backgroundColor = "255, 255, 255";
   }
   }

</script>
</head>
<body onload='maketable();'>
<table>
<tbody id='tb'>

<script type="text/javascript">

var rows = 16;
var cols = 16;
var table = document.createElement("table");

 table.id = "tb";

 for (var r = 0; r < rows; r++) {
  var row = document.createElement("tr");

 table.appendChild(row);

 for (var c = 0; c < cols; c++) {
  var cell = document.createElement("td");

 cell.addEventListener("onmousedown", colorize);
  row.appendChild(cell);
  }
  }

  document.body.appendChild(table);

 </script>
 </tbody>
 </table>
 </body>
 </html>


函数着色（el）{
变量
r=（255,0,0），
w=（255，255，255）；
if（event.onmousedown）{
r、 style.backgroundColor=“255,0,0”；
}否则{
w、 style.backgroundColor=“255、255、255”；
}
}
var行=16；
var-cols=16；
var table=document.createElement（“表”）；
table.id=“tb”；
对于（var r=0；r
您将
行定义为
var row=16；
然后在循环中，将其重新定义为
var row=document.createElement（“tr”）；

将
var row=16；
更改为
var rows=16；
然后当您循环创建行时，将（var r=0；r
更改为
for（var r=0；r

回复：您的点击处理程序“onmousedown”不是事件名称-
mousedown
是事件名称，因此更新
addEventHandler
以引用该-
单元格。addEventListener（“mousedown”，colorize）；

然后，您可以在函数中引用
event.target
，以获取单击的元素，还可以切换一个简单的类来切换颜色

function colorize(e){
  e.target.classList.toggle('red');
}
然后将
background:white
添加到
td
的CSS中，并添加一个名为
.red
的新类

.red {
  background: red;
}
总之

函数着色（e）{
e、 target.classList.toggle（'red'）；
}
函数maketable（）{
var行=16；
var-cols=16；
var table=document.createElement（“表”）；
table.id=“tb”；
对于（var r=0；r
表格{
边界间距：6px；
边框：1个rgb（#CCC）；
边缘顶部：.5in；
左边距：1英寸；
}
运输署{
宽度：40px；高度：40px；
边框：1px纯黑；
光标：指针；
背景：白色；
}
瑞德先生{
背景：红色；
}
您将
行定义为
var row=16；
然后在循环中，将其重新定义为
var row=document.createElement（“tr”）；

将
var row=16；
更改为
var rows=16；
然后当您循环创建行时，将（var r=0；r
更改为
for（var r=0；r

回复：您的点击处理程序“onmousedown”不是事件名称-
mousedown
是事件名称，因此更新
addEventHandler
以引用该-
单元格。addEventListener（“mousedown”，colorize）；

然后，您可以在函数中引用
event.target
，以获取单击的元素，还可以切换一个简单的类来切换颜色

function colorize(e){
  e.target.classList.toggle('red');
}
然后将
background:white
添加到
td
的CSS中，并添加一个名为
.red
的新类

.red {
  background: red;
}
总之

函数着色（e）{
e、 target.classList.toggle（'red'）；
}
函数maketable（）{
var行=16；
var-cols=16；
var table=document.createElement（“表”）；
table.id=“tb”；
对于（var r=0；r
表格{
边界间距：6px；
边框：1个rgb（#CCC）；
边缘顶部：.5in；
左边距：1英寸；
}
运输署{
宽度：40px；高度：40px；
边框：1px纯黑；
光标：指针；
背景：白色；
}
瑞德先生{
背景：红色；
}
初始化：（）=>{
var table=document.createElement（“表”）；
对于（变量i=0；i<16；i++）{
//排
var行=document.createElement（“tr”）；
row.addEventListener（“mousedown”，colorize）；//任何您想要的事件
//细胞
var cell=document.createElement（“td”）；
//附加
子行（单元格）；
表2.追加子项（行）；
}
//在第页上呈现
document.body.appendChild（表）；
}
//文档加载运行初始化
document.addEventListener（'DOMContentLoaded'，init）；

init:（）=>{
var table=document.createElement（“表”）；
对于（变量i=0；i<16；i++）{
//排
var行=document.createElement（“tr”）；
row.addEventListener（“mousedown”，colorize）；//任何您想要的事件
//细胞
var cell=document.createElement（“td”）；
//附加
子行（单元格）；
表2.追加子项（行）；
}
//在第页上呈现
document.body.appendChild（表）；
}
//文档加载运行初始化
文件.addEven