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

【问题标题】：Setting element width to an element width a percentage width not correct on page load将元素宽度设置为元素宽度百分比宽度在页面加载时不正确
【发布时间】：2017-01-28 21:23:14
【问题描述】：

我正在尝试将一个元素的宽度设置为等于另一个元素的宽度。
问题是当第二个元素具有百分比宽度时，jQuery 的 .width() 函数在页面首次加载时返回不正确的宽度。

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

这是一些代码：

CSS：

#first {
    width:50%;
}

Javascript：

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

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

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

【问题讨论】：

尝试将所有内容放在$(window).load(function() { ... }); 中，而不是$(function() { ... });。如果这不起作用，请包含您的所有代码，以便我们有一个完整的示例来复制您的问题。
您的文档中是否有 id 为 #first 的元素，或者您只是依赖 css？
@ibrahimmahrir 是的，我有一个带有 id 的元素。
@MichaelCoker 这会导致我的代码出错，说 $.fn 没有定义。
@TiFiShu 听起来你还有其他冲突的东西。您可以尝试将其放入它自己的脚本标签中。喜欢<script>$(window).load(function() { ... });</script>

标签： javascript jquery css

【解决方案1】：

你必须改变这个：

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

到这里：

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

<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>

【讨论】：

或者他可以使用$("#results").width($("#first").width());
我做出了改变。同样的问题。代码在没有像素的情况下工作有点奇怪。
@TiFiShu 如果你不指定值的类型，比如px、%、em等，然后是$.width()、$.height()、$.css()等将默认为px，您可以为它分配一个整数或字符串中的一个数字，例如“100”。
@Ti Fi Shu 我测试了它并工作了。我可以看看你的 html 代码吗？我在我的答案中创建了一个代码 sn-p 你可以看到。