1

我需要在循环中获取动态生成的 div 的高度和宽度。

细节

我正在动态设置定位绝对 div 的 left 和 top 值。这个 div 在一个循环中，因此它的宽度、高度和位置以间隔 n 变化。（它基本上是一个 div，每隔 n 秒出现在页面上的随机位置。）

我面临的挑战是这个 div 需要始终位于父级内部，<body>在这种情况下为标记。我已将其设置为position:relative，即使overflow:hidden它无济于事。

这是一个让事情变得更容易的小提琴。 Fiddle 1 在循环外，Fiddle 0 在循环外

您会看到，因为 x 和 y 值是随机生成的，所以 div 会溢出。

我发现为了将 div 保留在 body 中，它的高度和宽度必须与父级一起检索和计算，以获得大小的差异。 在此处输入图像描述 所以我可以像使用 css 一样使用它

var heightdiff = parentHeight - divHeight;

var widthdiff = parentWidth - divWidth;

通过 jQuery 在 css 中

top: Math.floor((Math.random()*heightdiff)+0;

left: Math.floor((Math.random()*widthdiff)+0;

也许我犯了一个简单的错误，但我已经尝试了我能想到的一切。回顾一下我需要做的就是获取 div 的高度和宽度。

4

1 回答 1

1

我修改了你的脚本：

http://jsfiddle.net/yMT56/1/

为什么使用文档作为基础？

var docw = $(document).width();
var doch = $(document).height();

使用身体

var docw = $('body').width();
var doch = $('body').height();

或者更好的是，div 的父级（要求您将 div 附加到容器之前）：

var docw = $newdiv.parent().width();
var doch = $newdiv.parent().height();

这里的问题是 div 没有内容，所以在你计算它的那一刻没有宽度和高度。所以我在开始时创建了它（注意我<body>在 html 部分添加了标签：我不知道 fiddlejs 如何处理这种情况）：

$newdiv = $('<div/>').css({
    'position':'absolute',
    'display':'block'
    }).html("Hi there, this should appear with in the body.<br/> Just wait it will overflow").appendTo( 'body' );
    //parent size, in this case body
    var docw = $('body').width();
    var doch = $('body').height();
     //calculating div size, before it's set, wrong!!
    var divh = $newdiv.height();
    var divw = $newdiv.width();

我还添加了一个 Math.max 控件以确保结果不会是负数，尤其是在 div 大于其父级的情况下。

//positions for x and y
var posx = Math.max((Math.random() * (wdiff) +1).toFixed(), 0);
var posy = Math.max((Math.random() * (hdiff) +1).toFixed(), 0);

最后，只为 div 放置位置：

$newdiv.css({
    'left':posx+'px',
    'top':posy+'px'
}).fadeIn(2000).fadeOut(2000, function(){

也许使用该解决方案，第一个 div 将在循环开始之前显示。一个解决方案是使用visibility:hidden属性，隐藏 div 但总是能够得到他的宽度和高度。

于 2013-11-13T12:41:09.700 回答