Question

我正在尝试计算元素的宽度和高度，使用jQuery在CSS中设置精确位置，但由于某些原因，在为其他ID和类工作时，某些ID的计算不起作用（警报显示0或无）。这是jQuery代码：

$(document).ready(function () {
    $("#img1").each(function () {
        var maxtop = $('.pattern').outerHeight() - $('#mimg1').outerHeight() - 20,
            maxleft = $('.pattern').outerWidth() - $('#mimg1').outerWidth() - 20,
            randomtop = getRandomInt(20, maxtop),
            randomleft = getRandomInt(20, maxleft),
            randomzindex = getRandomInt(1, 30);

        $(this).css({
            "top": randomtop,
            "left": randomleft,
            "z-index": randomzindex
        });
    });


    $("#img13").each(function () {
        var maxtop = $('.pattern').outerHeight() - $('#mimg13').outerHeight() - 20,
            maxleft = $('.pattern').outerWidth() - $('#mimg13').outerWidth() - 20,
            randomtop = getRandomInt(20, maxtop),
            randomleft = getRandomInt(20, maxleft),
            randomzindex = getRandomInt(1, 30);

            alert ($('#mimg13').outerHeight());

        $(this).css({
            "top": randomtop,
            "left": randomleft,
            "z-index": randomzindex
        });
    });

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
});

CSS：

html {width:100vw; height:100vh;}
body {margin:0; width:100vw; height:100vh; overflow:hidden;}
.pattern {width:100%; height:100%; margin:0; padding:0;}
.drag {overflow: visible; padding-bottom: 0px; cursor: move; position: absolute;}
.mood-img {position:absolute; display:none; margin:0; padding:0;}

HTML：

<body class="pattern-2">

<div class="pattern"></div>

<div id="img1" class="drag mood-img">
    <img class="shadow moodimg1" src="mood/brick-mood-1.png">
    <span class="mood-name shadow">
        <nobr>A. Brickwork I</nobr> 
    </span>
</div>

<div id="img13" class="drag mood-img">
    <img id="moodimg13" class="shadow moodimg" src="mood/brick-graphic-4.png">
    <span class="mood-name shadow">
        <nobr>6. Untitled</nobr><br>
        <small>digital</small>  
    </span>
</div>
</body>

我尝试了很多不同的选项，但没有一个能够工作，问题总是（看起来似乎）是JS不计算元素的大小，所以位置也计算错误。

也可能有一些更简单的方法来进行所有这些计算，因为我有13个具有不同ID的元素（从img1到img13以及从mimg1到mimg13。可能我可以使用JS来获取ID本身，我不需要将所有ID写入JS吗？

IDEA

我有一个包含几个div元素的页面，其中一个是可见的，其他则设置为display:none。单击特定span元素时，JS会将某些隐藏的div设置为可见，将其CSS更改为display:block。 div我有这个问题起初是一个隐藏的容器，用于其他几个带有图像和文本元素的div，我想把这些包含的元素放在容器div上（它有width和{{1}使用height和margin设置为0并将top left和50%设置为margin-top）。然后我将容器设置为margin-left 100%和width，并尝试使用height和top定位容器的内容。然后我删除了容器，并将其以前的内部元素设置为left，并尝试使用position:absolute和top属性计算并使用jQuery设置它。实际上这些元素是带有一些弹出文本的图像，应该随机放置在整个页面上（left），并且随机设置overflow:hidden。我花了三天时间试图找到解决方案，但没有得到任何结果 - 要么它根本不工作（元素在同一位置（左上角）全部放在另一个上面，要么计算错误而且有些（或者所有）div被放置在页面之外，当隐藏溢出时会创建滚动或隐藏图像。希望我解释得很好，所以任何人都能够理解我想做什么。

Answer 1

您正在计算页面加载的维度 - $(document).ready(...但不幸的是，这并不意味着此时图像已准备就绪。这是一个常见的问题由于您已经使用.each函数包装了图像，因此只需将其替换为load事件处理程序

$("#img1").on('load', function () {
    ...
});

Answer 2

http://jsbin.com/iLIWOfa/2/edit

如果图像的父元素的CSS为display: none，则不会加载图像，也没有宽度或高度。

只需设置opacity: 0。

无法计算元素的大小

2 个答案: