jQuery宽度得到错误的值答案

【问题标题】：jQuery width getting wrong valuejQuery宽度得到错误的值
【发布时间】：2016-08-12 07:51:33
【问题描述】：

我对 jquery 方法 .width() 有疑问。我有 4 个不同的 textarea 需要根据包含它们的 div 的大小来调整大小，所以我调用方法 .width() 来获取 div 的实际宽度（无论如何是窗口的 100%）但是这个方法即使将所有内容包装在 $(window).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 并得到了相同的结果。

【问题讨论】：

你得到了什么结果？
It returns the correct size. 你可能对为什么在第三个文本区域之后有一个换行符感到困惑。 border 为您没有考虑的每个 codeArea 添加额外的宽度。试试wiTex = ((wi) / 4) - 8; 减去 8 会导致每个框多出 2 个像素。
@MikeC – 除了减去 8 个像素 doesn't actually fix it。请参阅下面的答案
@KevinJantzer 你的答案没有错，但是subtracting 8 pixels does work. 你对错误的值执行减法。
@MikeC - 这个逻辑不是你所描述的“每个盒子 2 个额外像素”——当边框每个只占 2 个像素（=8 )

标签： javascript jquery html css

【解决方案1】：

我发现了两个问题。我第一次知道

您需要添加box-sizing: border-box，以便在设置框的width 时包含边框宽度。如果您不这样做，则设置为 100px 并带有 1px 边框的框实际上将是 102px 宽。
我发现的第二个问题是 jQuery 的 .width() 方法。出于某种原因，即使我手动告诉它设置为.width('100px')，这些框也被设置为112px。我将其改为使用原生 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>

【讨论】：

酷！确实做到了！边框的一部分，我只是从宽度中减去边框的大小，但是使用vanilla JS ......实际上我觉得有点愚蠢，因为不尝试那个，也许我不敢相信jQuery的宽度() 行不通...无论如何谢谢！
@AntonioVicencio，你检查我的答案了吗？检查该css-only部分。它更简单，更快。此外，它甚至可以在没有任何额外工作的情况下在调整大小窗口上工作 =) 但是，您的方法需要一些补充才能在调整窗口大小时正常工作。

【解决方案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 + 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 =) */
}

您可以自己see。

【讨论】：

【解决方案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>

干杯！

【讨论】：

【解决方案4】：

在第三个文本区域之后有一个换行符。是因为 CSS3 box-sizing 属性吗？默认情况下它是 content-box，它只包含内容本身而不包含填充。您需要将其更改为边框框；

【讨论】：