在js中改变vmax答案

【问题标题】：Changing vmax in js在js中改变vmax
【发布时间】：2021-01-04 20:20:38
【问题描述】：

我想在更改“网格”时更改 div 的大小（例如 - 对于 10x10 网格，我希望我的 div 为 3vmax，对于 11x11，我希望我的 div 为 2.9vmax 等等。 ...）我试图这样做，但它并没有按照我想要的方式工作：（这是我的代码笔：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`
    }
    
}

【问题讨论】：

这里修复了您的 vmax 计算。您也不需要在每个循环中都执行此操作，只需在循环之前执行此操作，例如 const vmax = 3 - ( (~~gridDOMElement.value - 10) * .1) 然后在需要的地方引用 vmax （如果需要，在将模板列分配给容器时包括循环外部）。如果您需要更多帮助，请告诉我。
我不知道如何引用它，你能帮帮我吗？ 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+"" }

标签： javascript css css-grid

【解决方案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"
        }
}

【讨论】：