將元素寬度設置爲元素寬度百分比寬度在頁面加載時不正確

我試圖將元素的寬度設置爲等於另一個元素的寬度。
問題是，當第二個元素具有百分比寬度時，jQuery的.width（）函數在第一次加載頁面時返回不正確的寬度。

如果我在加載頁面後做了同樣的事情，比如在onclick函數中，那麼.width（）返回元素的正確大小。
剛剛加載頁面時，就好像css沒有從百分比計算實際元素寬度一樣。

下面是一些代碼：將元素寬度設置爲元素寬度百分比寬度在頁面加載時不正確

CSS：

#first { 
    width:50%; 
}

的Javascript：

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

所以，這將不會返回#results元素的正確尺寸。如果我通過onclick方法調用此函數，則將其設置爲適當的寬度。

JavaScript/jQuery應該在執行代碼之前加載css百分比，對嗎？

來源

2017-01-27 Ti Fi Shu

嘗試把一切.load的'$（窗口）內（函數（） {...}）;'而不是'$（function（）{...}）;'。如果這不起作用，請包含所有代碼，以便我們有一個完整的示例來複制您的問題。 –

你在文檔中是否有一個ID爲「＃first」的元素，或者你只是依賴於css？ –

@ibrahimmahrir是的，我有一個id爲第一個元素。 –

您必須更改此：

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>

來源

2017-01-27 23:36:54

或者他可以使用'$（「＃results」）。width（$（「＃first」）.width（））;' – Sysix

我做了修改。同樣的問題。有點奇怪，代碼沒有px工作。 –

@TiFiShu如果你沒有指定一個類型的值，比如'px'，''''''em'等，那麼'$ .width（）'，'$ .height（）'，'$ .css （）'等將默認爲'px'，您可以爲其指定一個整數或一個字符串，如「100」。 –

將元素寬度設置爲元素寬度百分比寬度在頁面加載時不正確

回答

相關問題