Javascript 通过Jquery更改Div的高度和宽度

我正试着用正方形的盒子填满div容器。为什么这条线不行？我似乎无法更改div gridSquare的高度和宽度

我正在将小提琴与我的其他代码链接

谢谢你的阅读

---

我最终想要做的是使用squareSide变量来设置高度和宽度。

您需要使用类而不是id id id应该是唯一的，然后您需要在添加到正方形后设置正方形的css：

var squareSide=960/25； 控制台。侧面； 对于var行=0；行数<25；行++{ $.appendTo'.container' 对于var cols=0；cols<25；cols++{ $.appendTo'.container' } } $'.container'。在'mouseenter'上，'.gridSquare'，函数{ $this.css'background-color'，'white'； }; $'.gridSquare'.css{ 身高：38.4， 宽度：38.4 }; .集装箱{ 背景颜色：灰色； 保证金：0自动； 文本对齐：居中； 字号：0； 边缘底部：30px； 宽度：960px； 高度：960像素； } 格里德广场酒店{ 背景色：黑色； 显示：内联块； 垂直对齐：顶部； }

---

您需要使用类而不是id id id id应该是唯一的，然后您希望在附加到正方形后设置正方形的css：

var squareSide=960/25； 控制台。侧面； 对于var行=0；行数<25；行++{ $.appendTo'.container' 对于var cols=0；cols<25；cols++{ $.appendTo'.container' } } $'.container'。在'mouseenter'上，'.gridSquare'，函数{ $this.css'background-color'，'white'； }; $'.gridSquare'.css{ 身高：38.4， 宽度：38.4 }; .集装箱{ 背景颜色：灰色； 保证金：0自动； 文本对齐：居中； 字号：0； 边缘底部：30px； 宽度：960px； 高度：960像素； } 格里德广场酒店{ 背景色：黑色； 显示：内联块； 垂直对齐：顶部； } 大概

$('#gridSquare').css({"height": "38.4px", "width": "38.4px"});

大概

$('#gridSquare').css({"height": "38.4px", "width": "38.4px"});

使用类而不是id

加上这个

$(document).ready(function(){
    var squareSide = 960/25;



    console.log(squareSide);

    for(var rows = 0; rows < 25; rows++){
    $('<div class="gridSquare"></div>').appendTo('.container')
        for(var cols = 0; cols < 25; cols++){
            $('<div class="gridSquare"></div>').appendTo('.container');
            $('.gridSquare').css({"height": "38.4", "width": "38.4"});
        }
    }

    $('.container').on('mouseenter', '.gridSquare', function(){
        $(this).css('background-color', 'white');
    });

});

Fiddle使用class而不是id

加上这个

$(document).ready(function(){
    var squareSide = 960/25;



    console.log(squareSide);

    for(var rows = 0; rows < 25; rows++){
    $('<div class="gridSquare"></div>').appendTo('.container')
        for(var cols = 0; cols < 25; cols++){
            $('<div class="gridSquare"></div>').appendTo('.container');
            $('.gridSquare').css({"height": "38.4", "width": "38.4"});
        }
    }

    $('.container').on('mouseenter', '.gridSquare', function(){
        $(this).css('background-color', 'white');
    });

});

---

Fiddle

您应该为高度和宽度指定一个单位。当您更改元素的大小时，它不存在。例如，您应该为高度和宽度指定一个单位。当你改变元素的大小时，它是不存在的，可能是重复的，比如我必须等到以后才能添加CSS，因为元素必须在被CSS修改之前创建？谢谢你，顺便说一句。是的，元素不存在，所以当你对它们进行选择器时，选择器将返回0个元素。我已经为你创建了一个新的提琴，这样你就可以设置你想要的一排方块的数量，它会自动完成所有其他的事情：哦，酷！谢谢你教我新把戏。我看到了您是如何使代码更高效、更具可读性的。快速提问：有一个循环总比有一个嵌套循环好吗？即使在两个循环都有相同限制的情况下？你能给我解释一下吗？如果内部循环是一样的，那么我只会有一个循环-以后更容易维护，因为你只需要更改一段代码，而不是2。我必须等到以后才能添加CSS，因为元素必须先创建，然后才能被CSS修改？谢谢你，顺便说一句。是的，元素不存在，所以当你对它们进行选择器时，选择器将返回0个元素。我已经为你创建了一个新的提琴，这样你就可以设置你想要的一排方块的数量，它会自动完成所有其他的事情：哦，酷！谢谢你教我新把戏。我看到了您是如何使代码更高效、更具可读性的。快速提问：有一个循环总比有一个嵌套循环好吗？即使在两个循环都有相同限制的情况下？你能给我解释一下吗？如果内部循环是一样的，那么我只会有一个循环——以后更容易维护，因为你只需要更改一段代码，而不是两段代码