#javascript #css #css-grid
#javascript #css #css-сетка
Вопрос:
Я хочу изменить размер div при изменении «сетки» (например, для сетки 10×10 я хочу, чтобы мои divs были 3vmax, для 11×11 я хочу, чтобы мои divs были 2,9vmax и так далее ….) Я пытался сделать что-то подобное, но это работает не совсем так, как я хочу: ( Вот мой codepen: https://codepen.io/diana-larussa/pen/OJRZMXp
function newGrid() {
while (container.firstChild) {
container.removeChild(container.firstChild)
}
for (let index = 0; index < gridDOMElement.value*gridDOMElement.value; index ) {
const div = document.createElement("div")
container.appendChild(div)
}
container.style.gridTemplateColumns = "repeat(" gridDOMElement.value ", `${3 - gridDOMElement.value * 0.1}vmax`)"
container.style.gridTemplateRows = "repeat(" gridDOMElement.value ", `${3 - gridDOMElement.value * 0.1}vmax`)"
let divElement = document.querySelectorAll('div')
for (let i = 0; i < gridDOMElement.value*gridDOMElement.value; i) {
divElement[i].style.height = `${3 - gridDOMElement.value * 0.1}vmax`
divElement[i].style.width = `${3 - gridDOMElement.value * 0.1}vmax`
}
}
Комментарии:
1. вот исправление для вашего вычисления vmax. вам также не нужно делать это в каждом цикле, просто сделайте это перед циклом, например
const vmax = 3 - ( (~~gridDOMElement.value - 10) * .1)
, затем ссылайтесь на vmax там, где это необходимо (в том числе вне цикла при назначении столбцов шаблона контейнеру, если это необходимо). дайте мне знать, если вам понадобится дополнительная помощь.2. Я не уверен, как на это ссылаться, не могли бы вы мне помочь, пожалуйста?
const vmax = 3 - ( (~~gridDOMElement.value - 10) * .1) container.style.gridTemplateColumns = "repeat(" gridDOMElement.value ", 3" vmax ")" container.style.gridTemplateRows = "repeat(" gridDOMElement.value ", 3" vmax ")" let divElement = document.querySelectorAll('div') for (let i = 0; i < gridDOMElement.value*gridDOMElement.value; i) { divElement[i].style.height = "3" vmax "" divElement[i].style.width = "3" vmax "" }
Ответ №1:
Вот ответ:
function newGrid() {
while (container.firstChild) {
container.removeChild(container.firstChild)
}
for (let index = 0; index < gridDOMElement.value*gridDOMElement.value; index ) {
const div = document.createElement("div")
container.appendChild(div)
}
const vmax = 3 - ( (~~gridDOMElement.value - 10) * .1)
container.style.gridTemplateColumns = "repeat(" gridDOMElement.value ", " vmax "vmax)"
container.style.gridTemplateRows = "repeat(" gridDOMElement.value ", " vmax "vmax)"
let divElement = document.querySelectorAll('div')
for (let i = 0; i < gridDOMElement.value*gridDOMElement.value; i) {
divElement[i].style.height = "" vmax "vmax"
divElement[i].style.width = "" vmax "vmax"
}
}