如何用Vanilla JavaScript实现像素画网格一键填充颜色？

没问题，我来帮你把这段jQuery代码转换成原生JavaScript，核心逻辑和jQuery版本完全一致，只是换用原生DOM API来实现，完整代码如下：

// 获取页面元素
const quickFillBtn = document.querySelector('.quick-fill');
const colorPicker = document.querySelector('.color-picker');
const pixelCanvas = document.querySelector('.pixelCanvas'); // 确保这个选择器和你的画布元素匹配

// 绑定点击事件
quickFillBtn.addEventListener('click', function() {
  // 获取当前选中的颜色
  const selectedColor = colorPicker.value;
  // 找到画布下所有的单元格
  const allGridCells = pixelCanvas.querySelectorAll('td');
  // 遍历所有单元格，设置背景色
  allGridCells.forEach(cell => {
    cell.style.backgroundColor = selectedColor;
  });
});

关键转换点说明： #

• 对应jQuery的$(".quick-fill").click(...)：原生使用addEventListener来绑定点击事件，这是标准的DOM事件绑定方式
• 对应$('.color-picker').val()：原生直接通过元素的value属性获取颜色选择器的值
• 对应pixelCanvas.children().find('td')：原生用querySelectorAll('td')可以直接获取画布下所有层级的<td>元素，返回一个NodeList集合
• 最容易卡壳的地方：jQuery会自动遍历元素集合并应用样式，但原生需要手动用forEach遍历NodeList，给每个单元格单独设置backgroundColor样式

这样就能实现和jQuery版本完全一样的快速填充功能啦～

内容的提问来源于stack exchange，提问作者nCardot