jQuery寬度得到錯誤的值

Question

我有一個jquery方法.width（）的問題。 我有4個不同的textarea需要根據包含它們的div的大小調整大小，所以我調用方法.width（）來獲取div的實際寬度（無論如何是窗口的100％）但是這個方法即使在$（窗口）.ready（）中包裝所有內容后，也總是得到錯誤的值。

這是CSS

#contCode{
    width: 100%;
    height: 500px;
    margin-top: 50px;
    float: left;
    padding: 0;
}
.codeArea{
    float: left;
    font-family: "Lucida Console", Monaco, monospace;
    height:100%;
    padding: 5px 0 0 5px;
    margin: 0;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    resize: none;
}

這是HTML

<div id="contCode">
    <textarea class="codeArea" placeholder="Put your code here"></textarea>
    <textarea class="codeArea" placeholder="Put your code here"></textarea>
    <textarea class="codeArea" placeholder="Put your code here"></textarea>
    <div class="codeArea"></div>
</div>

這是劇本

$(window).ready(function (){
        var wi = $("#contCode").width(); 
        var wiTex;
        wiTex = (wi) / 4;
        $(".codeArea").width(wiTex);
    });

我已經嘗試使用outerWidth和innerWith並得到了相同的結果。

Answer 1

我發現了兩個問題。 我知道的第一個

1. 您需要添加box-sizing: border-box ，這樣當你設置的width包含邊框寬度的箱子。 如果不這樣做，設置為100px且邊框為1px框實際上102px寬。

2. 我發現的第二個問題是使用jQuery的.width()方法。 出於某種原因，即使我手動設置為.width('100px') ，盒子也被設置為112px 。 我改為使用vanilla JavaScript。

您可以從下面的演示中看到這些框現在對齊。

 $(window).ready(function() { var wi = $("#contCode").width(); var wiTex = (wi) / 4; document.querySelectorAll('.codeArea').forEach(function(node) { node.style.width = wiTex+'px' }) }); 

 #contCode { width: 100%; height: 500px; margin-top: 50px; float: left; padding: 0; } .codeArea { float: left; font-family: "Lucida Console", Monaco, monospace; height: 100%; padding: 5px 0 0 5px; margin: 0; border-right: 1px solid black; border-bottom: 1px solid black; resize: none; background: #ccc; box-sizing: border-box; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="contCode"> <textarea class="codeArea" placeholder="Put your code here"></textarea> <textarea class="codeArea" placeholder="Put your code here"></textarea> <textarea class="codeArea" placeholder="Put your code here"></textarea> <div class="codeArea">The result area</div> </div> 

Answer 2

只是用這個：

$(document).ready(function (){
    var wi = $("#contCode").width(); 
    var wiTex;
    wiTex = (wi) / 4;
    $(".codeArea").width(wiTex - 7); //here is the trick =)
});

為什么我下調7像素？ 這是因為css如何計算元素的寬度。

在css中，width等於width + padding + border 。 在您的情況下，元素的實際寬度將是： wiTex + 5px of left padding + 2 pixels of borders

---

你甚至可以刪除javascript代碼並使用此css ：

.codeArea{
    float: left;
    font-family: "Lucida Console", Monaco, monospace;
    height:100%;
    padding: 5px 0 0 5px;
    margin: 0;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    resize: none;
    width: calc(25% - 7px); /* magic =) */
}

你可以自己看看 。

Answer 3

試試這個！

  #contCode{ width: 100%; height: 500px; margin-top: 50px; float:left; padding: 0; } .codeArea{ float: left; font-family: "Lucida Console", Monaco, monospace; height:100%; width:22%; //Added this padding:5px 0 0 5px; margin: 0; border:1px solid #ccc; color:#333; resize: none; background-color:#eee; } 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="contCode"> <textarea class="codeArea" placeholder="Put your code here"></textarea> <textarea class="codeArea" placeholder="Put your code here"></textarea> <textarea class="codeArea" placeholder="Put your code here"></textarea> <div class="codeArea">Hello World</div> </div> 

干杯!

Answer 4

在第3個textarea之后有一個換行符。 是因為CSS3盒子大小的屬性？ 默認情況下，它是content-box，它只包含內容本身但不包含填充。 你需要將它改為邊框;