通过 setAttribute 为 div 网格设置宽度、高度 - Etch-a-sketch。悬停时样式重置答案

【问题标题】：setting width, height via setAttribute for a grid of divs - Etch-a-sketch. Style resets when hovered over通过 setAttribute 为 div 网格设置宽度、高度 - Etch-a-sketch。悬停时样式重置
【发布时间】：2022-02-18 03:02:06
【问题描述】：

我对编码很陌生。我正在编写 Etch-a-sketch（通过 Odin 项目）。基本上，它由一个网格组成，当将鼠标悬停在该网格上时，网格的框将变为随机颜色。（容器应该保持相同的尺寸）加载页面后，它以 16x16 框的基本网格开始。

用户还可以选择创建自定义网格（例如，如果用户输入 50，则容器将填充 50x50 的框，它们的高度和宽度适合填充容器）

我似乎被困在这个阶段，当单击按钮并输入一定数量的框时，网格会更新。但是，当将鼠标悬停在这个“自定义”网格上时，框大小会重置为 CSS 中定义的原始宽度/高度。

将鼠标悬停在上方时，框应保持其自定义大小。（以及当颜色改变时）

在代码笔下方，可以清楚地显示问题，（输入自定义网格大小（最大 100 以提高性能）并按 Enter）。

Codepen 此处包含完整的 HTML/CSS/JS + 示例： Codepen

const gridSizeButton = document.getElementById('gridSizeButton');
 gridSizeButton.addEventListener('click', customGridSize);
 let gridContainer = document.getElementById('gridContainer');
 let boxes = document.querySelectorAll('.box');

function customGridSize() {
    let input = prompt('Please enter your desired gridsize. (max 100)');
    //convert to number
    let gridSize = parseInt(input);
    console.log('Gridsize requested:' + gridSize);
    //create grid with gridSize input
    createCustomGrid(gridSize);
}

function createCustomGrid(gridSize) {
    //calculate total amount of boxes
    let boxAmount = gridSize * gridSize;
    console.log('total amount of boxes needed:' + boxAmount);
    //calculate box size (standard grid is 400px wide and high)
    let boxSize = (400 / gridSize) + 'px';
    console.log('Boxsize:' + boxSize);
    //before creating new grid, remove standard grid (boxes) loaded on start page
    while (gridContainer.firstChild) gridContainer.removeChild(gridContainer.firstChild);
    console.log("Boxamount: " + boxAmount);

    for (let i = 0; i < boxAmount; i++) {
        createBox();
        console.log('custombox created');
    }
        let boxes = document.querySelectorAll('.box');
        boxes.forEach(box => {
        box.setAttribute('style', `width:${boxSize}; height:${boxSize}; background:${changeColor}`);
        })

}

//create standard grid on page load:
 createStandardGrid();

function createStandardGrid() {
        for (i = 0; i<256; i++) {
        createBox();
        console.log("box created");
        }
}

 function createBox () {
    const box = document.createElement('div');
    box.classList.add("box");
    document.getElementById("gridContainer").appendChild(box);
    box.addEventListener('mouseover',changeBoxColor);
 }

 function changeBoxColor(e) {
    e.target.setAttribute('style', `background: ${changeColor()}`);
    console.log(e.target.className);
 }

 function changeColor(){
    let r = Math.floor(Math.random() * 255); 
    let g = Math.floor(Math.random() * 255); 
    let b = Math.floor(Math.random() * 255);
    return `rgb(${r},${g},${b})`;
 }

我认为问题可能是由于 setAttribute(s)：我在 2 个函数中有 setAttribute：createCustomGrid() 和 changeBoxColor()。也许某处有冲突？但是我看不到它，已经尝试了几个小时，但似乎找不到问题。

或者我是否应该摆脱外部 CSS 中的宽度和高度并基于此重写 Javascript？并在 Javascript 函数中编写“标准”网格框大小而不是在 CSS 中定义它？

希望你们中的某个人可以为我指明正确的方向。我知道这可能不是对该项目进行编码的最佳方式，但我主要是想了解我在这段代码中做错了什么。（随着我的进步，我可以让它变得越来越高效，比如使用 CSS 网格等）

提前谢谢你！

【问题讨论】：

标签： javascript loops styles width setattribute

【解决方案1】：

我想我会更新我最初的问题；经过几天的搜索和更新代码，我发现在使用setAttribute设置元素的宽度和高度时，然后使用setAttribute仅更改同一元素的样式设置，它会重置之前通过 setAttribute 指定的宽度和高度。 解决此问题的方法是在最新的 setAttribute 调用中再次指定宽度和高度。或者，您可以通过element.style.backgroundColor = 'color'; 来设置样式，而不是使用 setAttribute 来设置样式

因此，如果其他人遇到同样的问题，希望对您有所帮助。 :)

【讨论】：