Изменение высоты и ширины Div с помощью JQuery

Я пытаюсь заполнить контейнер div квадратными коробками. Почему эта линия не работает? Кажется, я не могу изменить высоту и ширину моего div #gridSquare.Изменение высоты и ширины Div с помощью JQuery

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

Я связываю скрипку с остальной частью своего кода.

Благодарим за понимание!

Fiddle

То, что я в конечном итоге нужно сделать, это использовать переменную squareSide установить Hight и ширину.

источник

2015-07-23 hackrnaut

следует указать единицу по высоте и ширине. И когда вы меняете размер элемента, он еще не существует – fcalderan

Возможный дубликат [Установка ширины и высоты DIV в JavaScript] (http://stackoverflow.com/questions/10118172/setting-div-width-and- height-in-javascript) –

Как http://jsfiddle.net/tusharj/5ojjbwms/1/ – Tushar

Вы должны использовать класс вместо идентификатора (идентификаторов должны быть уникальными), а затем вы хотите установить 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{ 
 
\t background-color: grey; 
 
\t margin: 0 auto; 
 
\t text-align: center; 
 
\t font-size: 0; 
 
\t margin-bottom: 30px; 
 
\t width: 960px; 
 
\t height: 960px; 
 
} 
 

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

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

Кроме того, ваш цикл может быть изменен на

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

источник

2015-07-23 10:04:31 Pete

Должен ли я ждать до тех пор, пока не будет добавлен CSS, потому что элементы должны быть созданы до того, как их можно будет изменить с помощью CSS? Спасибо, кстати. – hackrnaut

Да, элементы не существуют, поэтому, когда вы делаете селектор на них, селектор вернет 0 элементов. Я создал для вас новую скрипку, чтобы вы могли просто задать количество квадратов, которые вы хотите в строке, и оно будет делать все остальное автоматически: http://jsfiddle.net/5ojjwwms/8/ – Pete

Ох, круто! Спасибо, что научил меня новым трюкам. Я вижу, как вы сделали код более эффективным и читаемым в целом. Быстрый вопрос: всегда лучше иметь один цикл, чем иметь вложенный цикл? Даже в том случае, когда обе петли будут иметь те же ограничения? Вы можете мне это объяснить? – hackrnaut

Возможно

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

источник

2015-07-23 10:05:40

Использование 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 http://jsfiddle.net/5ojjbwms/6/

источник

2015-07-23 10:07:45

Изменение высоты и ширины Div с помощью JQuery

ответ

Смежные вопросы