將元素寬度設置為元素寬度，頁面加載時不正確的百分比寬度

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');
}

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

將元素寬度設置為元素寬度，頁面加載時不正確的百分比寬度

問題描述

1 個解決方案

解決方案1
2 2017-01-27 23:36:54

將元素寬度設置為元素寬度，頁面加載時不正確的百分比寬度

問題描述

1 個解決方案

解決方案1 2 2017-01-27 23:36:54

解決方案1
2 2017-01-27 23:36:54