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

Very strange; containing element changes size when $(this).width() is called

本文关键字：元素 包含 改变 width this 调用      更新时间：2023-09-26

我正在制作网页底部的导航栏(用于移动布局)，我使用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的宽度得到的结果:

美元(这).width ();是:

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

这是完美的。下面是注释掉这一行后的输出:

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

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

E:同样，删除CSS文件中的"display: none;"行也会模拟同样的问题。

下面是我剩下的代码(很短):

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事件/strong>

<

准备事件/strong>

我可以使用

来修复这个问题
table-layout: fixed;

来均匀分配表格单元格，而不是在页面加载时计算。不知道为什么我之前没有想到这个

相关文章：