Question

尝试创建像素艺术编辑器。目标是在悬停或onclick时在div中着色。我想做一个单独的功能，以便用户可以选择一种颜色。 div具有以下功能。

在创建div后，我尝试存储div。我尝试制作一个按类名选择div的函数，并在运行创建它们的函数后运行它。

function createGrid(y){
  let container = document.querySelector('.container');
  for(i = 0; i < y; i++){
    let row = document.createElement('div');
    row.className = 'row';
    for(x = 1; x <= y; x++){
      let cell = document.createElement('div');
      cell.className = 'cell';
      row.appendChild(cell);
    }
    container.appendChild(row);
  }
}

//I notice other people doing this but I don't understand how this makes a 
//grid.
//what do the $ mean and why 960/x?

function createGrid(x) {
    for (var rows = 0; rows < x; rows++) {
        for (var columns = 0; columns < x; columns++) {
            $("#container").append("<div class='grid'></div>");
        };
    };
    $(".grid").width(960/x);
    $(".grid").height(960/x);
};

Answer 1

您可能应该只在带有:hover选项的css类后附加阴影。但是，如果您必须在JS上执行此操作，则可以使用onmouseenter和onmouseleave函数，如下所示：

function createGrid(y){
  let container = document.querySelector('.container');
  for(i = 0; i < y; i++){
    let row = document.createElement('div');
    row.className = 'row';
    for(x = 1; x <= y; x++){
      let cell = document.createElement('div');
      cell.className = 'cell';
      cell.onmouseenter = () => cell.setAttribute("style", "background-color:rgba(0,0,0,0.2)")
      cell.onmouseleave = () => cell.setAttribute("style", "")
      row.appendChild(cell);
    }
    container.appendChild(row);
  }
}

Here's a working example

我正在尝试在js函数（像素艺术编辑器）创建的网格中设置div的样式

1 个答案: