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

Question

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

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

我似乎卡在了这个阶段，当单击按钮并输入一定数量的框时，网格将更新。但是，当鼠标悬停在这个 'custom' 网格上时，框大小将重置为 CSS.

中定义的原始 width/height

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

在将清楚显示问题的代码笔下方，（输入自定义网格大小（性能最大 100）并按回车键）。

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 函数中写入 'standard' 网格框大小，而不是在 CSS?

中定义它

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

提前致谢！

Answer 1

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

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

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

setting width, height via setAttribute for a grid of divs - Etch-a-sketch. Style resets when hovered over

javascript

loops

styles

width

setattribute