个人中心
gpt4 book ai didi

javascript - 很奇怪;当 $(this).width() 被调用时包含元素改变大小

转载 作者：行者123 更新时间：2023-11-28 10:27:09 26 4
gpt4 key购买 nike

我正致力于在网页底部制作一个导航栏(用于移动布局)，并在页面加载后使用 jQuery 调整导航栏的大小。

我将每个按钮作为表格中的一个单元格，每个单元格都包含一个图像。我正在尝试根据元素的大小设置图像尺寸。我现在所拥有的完全按照我想要的方式工作，但我不知道为什么。

我困惑的根源:

$("img.nav").each(function() {
    $(this).width(); // commenting out this line changes the width of each <td> element     
    $(this).css("display", "block");
    $(this).css("height", "80%");
    $(this).css("width", "auto");
});

这是我打印 td 的宽度时得到的结果:

用 $(this).width();原样:

w 0: 217
w 1: 217
w 2: 217

这是完美的。这是我注释掉该行时的输出:

w 0: 210
w 1: 200
w 2: 241

不完美。我需要他们都一样。

E:另外，删除“display: none;” CSS 文件中的行模拟相同的问题。

这是我的其余代码(很短):

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <link rel="stylesheet" type="text/css" href="css/globals.css" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/libjs.js"></script>

        <title></title>
    </head>
    <body>
        <div id="content"><p>Some example text that does nothing.</p></div>

        <nav>
            <table>
                <tr>
                    <td id="nav_home" class="active">
                        <img class="center nav" src="img/home.png" alt="img_nav_home" width="150" height="200"/>
                    </td>

                    <td id="nav_map">
                        <img class="center nav" src="img/map.png" alt="img_nav_map" width="103" height="200"/>
                    </td>

                    <td id="nav_send">
                        <img class="center nav" src="img/send.png" alt="img_nav_send" width="286" height="200"/>
                    </td>
                </tr>
            </table>
        </nav>
    </body>
</html>

CSS:

* 
{
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    border-style: none;
    font-family: "Berlin Sans FB", Arial, sans-serif;
    color: #383c47;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  /* transparent link selection, last value opacity 0 to 1.0 */
    -webkit-touch-callout: none;                    /* prevent callout to copy image */
    -webkit-text-size-adjust: none;                 /* prevent resizing text to fit */
    -webkit-user-select: none;                      /* prevent copy paste */
}

/* Centers an image both horizontally and vertically in it's container. */
img.center {
    display: block;
    margin: auto;
}

body {
    background-image: url(../img/bg.png); 
}

#content {
    background-color: white;
    width: 70%;
    height: 70%;
}

    #content p {
        padding: 5%;
    }

/* The navigation bar at the bottom of each page. */
nav {
    background-color: #b50043;
    width: 100%;
    height: 18%;
}

    nav table {
        border-spacing: 0px;
    }

    nav table .active {
        background-color: #383c47;
    }

    nav table img.nav {     
        display: none;  /* Also, removing this line will cause the same problem */
    }

    nav table #nav_home {
        background-color: lightblue;
    }

    nav table #nav_map {
        background-color: green;
    }

    nav table #nav_send {
        background-color: blue;
    }

jQuery:

// Centers the element both vertically and horizontally in the given element.
// Allows Top and Left offsets to account for "fixed" elements in the parent.
// Does not work with images (images work a little differently).
jQuery.fn.center = function(parent, offsetTop, offsetLeft) {
    $(this).css("position", "absolute");
    $(this).css("top", ($(parent).height() - this.outerHeight()) / 2 + offsetTop);
    $(this).css("left", ($(parent).width() - this.outerWidth()) / 2 + offsetLeft);

    return $(this);
}

// Use .resize and .ready to adjust layout based on screen size
$(window).resize(function() {
    $("#content").center($(window), -($("nav").height() / 2), 0);

    // positions the navigation bar at the bottom of the page
    $("nav").css("position", "fixed");
    $("nav").css("top", $(window).height() - $("nav").height());

    // equally distribute nav buttons over the width of the screen
    $("nav table tr > td").each(function() {
        $(this).width($("nav").width() / $(this).length);
        $(this).height($("nav").height());
    }); 

    $("img.nav").each(function() {
        //$(this).width();          
        $(this).css("display", "block");
        $(this).css("height", "80%");
        $(this).css("width", "auto");
    });

    $("td").each(function(i) {
        console.log("w " + i + ": " + $(this).width());
    })

});

$(document).ready(function() {
    $(window).trigger('resize');
});

提前致谢!

最佳答案

您应该在 $(window).load 而不是 $(document).ready 上更改调用大小调整。

问题出在下一件事上 - document.ready 事件在 HTML-Document 已加载且 DOM 已准备就绪 时触发，但您还需要等到所有图像加载完毕。

文档:

onload Event

ready Event

关于javascript - 很奇怪;当 $(this).width() 被调用时包含元素改变大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23684456/

26 4 0
文章推荐： javascript - Jquery/Javascript
文章推荐： html - 即使使用 box-sizing border-box 也可以包裹 Flex 元素
文章推荐： javascript - 用于 jquery 性能优化的 Web 浏览器插件
文章推荐： html - html 规范是否说明同时指定 bottom 和 margin-bottom 时会发生什么？
行者123
个人简介

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

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