Question

我试图将元素的宽度设置为等于另一个元素的宽度。
问题是，当第二个元素的宽度为百分比时，jQuery的.width（）函数会在首次加载页面时返回错误的宽度。

如果我在加载页面后执行相同操作（例如在onclick函数中），则.width（）将返回元素的正确大小。
这是在第一次加载页面时，好像css还没有从百分比计算出实际的元素宽度。

这是一些代码：

CSS：

#first {
    width:50%;
}

Javascript：

$(function(){
    function resizeResults() {
        $("#results").css("width", $("#first").width());
    }
    resizeResults();
});

因此，它不会返回#results元素的正确大小。如果我通过onclick方法调用此函数，则将其设置为正确的宽度。

在执行代码之前，JavaScript / jQuery应该考虑加载的css百分比，对吗？

Answer 1

你必须改变这个：

function resizeResults() {
    $("#results").css("width", $("#first").width());
}

到此：

function resizeResults() {
    $("#results").css("width", $("#first").width() + 'px');
}

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>        
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
    <style>
        div {
            height: 100px;
            background-color: #acacac;
            margin: 10px;
        }
    </style>
    <script>
        $(function ()
        {
            function resizeResults()
            {
                $("#results").css("width", $("#first").width() + 'px');
            }
            resizeResults();
        });
    </script>
</head>
<body>
    <div id="first" style="width:200px;">Div first</div>
    <div id="results" style="width:400px">Div result</div>
</body>
</html>

＆＃13;

将元素宽度设置为元素宽度，页面加载时百分比宽度不正确

1 个答案: