个人中心
gpt4 book ai didi

javascript - 无法计算元素的大小

转载 作者：太空宇宙 更新时间：2023-11-03 23:50:43 25 4
gpt4 key购买 nike

我正在尝试计算元素的宽度和高度，以使用 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里吗？

想法

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

最佳答案

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

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

关于javascript - 无法计算元素的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20286097/

25 4 0
文章推荐： html - AngularJS 动画在 Firefox 中不起作用
文章推荐： C - 链表 - 删除节点
文章推荐： python - 在 Qt gui 中嵌入图
文章推荐： 在 C 中调用不同的用户定义函数
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com