JavaScript生成的样式未在动态生成的div上显示问题求助

核心问题 #

你遇到的情况是因为CSS边框要正常显示必须同时设置border-width、border-color和border-style，默认border-style为none，就算你设置了宽度和颜色，浏览器也不会渲染边框，所以盒模型里看不到边框宽度。

修复方案 #

给.grid元素设置边框宽度的同时，补上border-style属性即可。可以单独设置该属性，也可以用border简写一次性完成三个属性的配置。

修改后的代码 #

const changeBackground = document.getElementById('backgroundColor');

changeBackground.addEventListener('change', function(e){
    const selectColor = changeBackground.value;
    const grid = document.querySelectorAll('.grid');
    
    // 统一设置边框宽度和样式，避免重复遍历DOM
    grid.forEach(div => {
        div.style.borderWidth = '0.5px';
        div.style.borderStyle = 'solid'; // 补上这个关键属性
    });

    if(selectColor === '#000000'){
        console.log(selectColor);
        grid.forEach(div => div.style.borderColor = 'white');
        container.style.backgroundColor = selectColor;
     }else {
        grid.forEach(div => div.style.borderColor = '#000000');
        container.style.backgroundColor = selectColor;
    }
})

也可以用更简洁的border简写写法，替换上面的边框设置部分：

grid.forEach(div => div.style.border = '0.5px solid');

额外提示 #

如果0.5px边框在部分浏览器显示异常，可以考虑改用1px边框，或者通过CSS伪元素配合transform: scale(0.5)实现细边框效果，但这属于优化项，先解决border-style的问题就能让边框正常出现在盒模型中。

内容的提问来源于stack exchange，提问作者Revanth Rockie