通过Jquery改变Div的高度和宽度

Question

我正在尝试用方框填充div容器。为什么这条线不起作用？我似乎无法更改div #gridSquare的高度和宽度。

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

我正在将小提琴与我的其余代码联系起来。

感谢您阅读！

Fiddle

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

Answer 1

你需要使用一个类而不是一个id（ id应该是唯一的），然后你想要在之后设置正方形的css ：

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')
  }
}

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

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

.container{
	background-color: grey;
	margin: 0 auto;
	text-align: center;
	font-size: 0;
	margin-bottom: 30px;
	width: 960px;
	height: 960px;
}

.gridSquare{
	background-color: black;
	display: inline-block;
	vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

您的for循环也可以更改为

// 625 = 25 * 25
for (var i = 0; i < 625; i++) {
    $('<div class="gridSquare"></div>').appendTo('.container')
}

Answer 2

可能

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

Answer 3

使用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');
    });

});

小提琴http://jsfiddle.net/5ojjbwms/6/