Блог

Главная - Вопросы по программированию - Изменение vmax в js

Изменение vmax в js

#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"
        }
}