我正在根据窗口计算一个盒子的宽度和高度，height并将width其除以 12 以获得 12 个相同大小的盒子。
我创建了这个脚本来在点击时在正文上附加框-
$('body').append('<div class="box"></div>');
$('.box').css('display','block');
这就是我如何计算这个盒子的宽度-
var width=$(window).width();
var span12= width/12;
而对于身高-
var height=$(window).height();
var spanheight=height/12;
我想在点击事件上附加所有可能的框。那可能吗？
box每次创建新的时都需要定义 css 属性<div>，
因为$('.box').css('display','block');只会对已加载的内容产生影响。
你可以这样尝试：
它使用循环来显示 12 个框，或者如果您再次将它与 Number 相乘，它将在屏幕上显示所有可能的框。
您计算中的主要问题是您没有考虑每个框周围的 3px。
margin: 3px;
下面是一些工作 JavaScript 代码来替换您发布的 JavaScript。此代码循环遍历 body 的高度和宽度，并在整个可见区域创建 div 瓦片。
这是小提琴：http: //jsfiddle.net/yUqXs/5/
$(function(){
var winwidth = $(window).width();
var width=winwidth;
var span12= width/12;
var winheight = $(window).height();
var height=winheight;
var spanheight=height/12;
$('.button').click(function(){
var $body = $('body');
var totalw = 0;
var totalh = 0;
var totalw2 = span12;
var totalh2 = spanheight;
while (totalh2 < winheight)
{
totalw = 0;
totalw2 = span12;
while (totalw2 < winwidth)
{
$body.append('<div class="box" style="display: block; background: green; width: '+span12+'px; height: '+spanheight+'px; float: left; position: absolute; top: '+totalh+'px; left: '+totalw+'px;"> </div>');
totalw += span12;
totalw2 += span12;
}
totalh += spanheight;
totalh2 += spanheight;
}
});
});
尝试使用这个
$(function(){
var width=$(window).width();
var span12= width/12;
var height=$(window).height();
var spanheight=height/12;
$('.button').click(function(){
$('body').append('<div class="box"></div>');
$('.box').css('display','block');
$('.box').css("height",spanheight);
$('.box').css("width",span12);
$('.box').css("background","green");
$('.box').css("margin","10px");
});
});
在您的情况下发生的情况是您的 div 附加到正文，但是它的高度和宽度为“0”，因此您必须在点击功能上设置它。
不确定，但可能你想要这个，更新你的代码。
css properties每次添加框时都需要更新。检查这个小提琴