通过 setAttribute 为 div 网格设置宽度和高度 - Etch-a-sketch。悬停时样式重置
setting width, height via setAttribute for a grid of divs - Etch-a-sketch. Style resets when hovered over
我对编码还很陌生。
我正在编写一个 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 网格等)
提前致谢!
我想我会更新我最初的问题;
经过几天的搜索和更新代码,我发现使用 setAttribute
设置元素的宽度和高度后,您使用 setAttribute
仅更改相同的样式设置元素,它会重置之前通过 setAttribute 指定的宽度和高度。 解决此问题的方法是在最新的 setAttribute 调用中再次指定宽度和高度。或者不使用 setAttribute 来设置样式,您可以通过 element.style.backgroundColor = 'color';
因此,如果其他人遇到同样的问题,希望对您有所帮助。 :)
我对编码还很陌生。 我正在编写一个 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 网格等)
提前致谢!
我想我会更新我最初的问题;
经过几天的搜索和更新代码,我发现使用 setAttribute
设置元素的宽度和高度后,您使用 setAttribute
仅更改相同的样式设置元素,它会重置之前通过 setAttribute 指定的宽度和高度。 解决此问题的方法是在最新的 setAttribute 调用中再次指定宽度和高度。或者不使用 setAttribute 来设置样式,您可以通过 element.style.backgroundColor = 'color';
因此,如果其他人遇到同样的问题,希望对您有所帮助。 :)