javascript - 使用javascript计算宽度并调整css

Question

我正在使用 javascript 计算 #red 和 #yellow 的宽度和 css 来设计。 html 是:

<div id="gray">
   <div id="red"></div>
   <div id="yellow"></div>
</div>

<style>
  #gray {
    width:100px;
  }
  #red {
    background-color:red;
    float: left;
  }
  #yellow {
    background-color: yellow;
    float:left;
  }
</style>

宽度以填充#gray 颜色的百分比计算。直到#red 和#yellow 的宽度之和小于或等于100% 时显示才正确，因为我已经考虑过div #gray 为 100% 宽度。如果总和超过 100%，则颜色条显示为两行。当总和超过 100% 时，是否可以计算 #gray 的宽度，以便条形排成一行，并且可以用虚线作为指示符，其中 100% width 是超过了。请问我是否不清楚我的意思。基本上我希望 #yellow 和 #red 都在同一行，而不是一个在另一个下面

编辑:

config.hourPerPercent=parseInt(data.totalspace)/100;
var futureNum=new Number((1/config.hourPerPercent)*parseInt(data.inuse));
var recNum=new Number((1/config.hourPerPercent)*parseInt(data.used));

config.Usage=futureNum.toFixed(2);              
config.Used=recNum.toFixed(2);

$('#red').css('width',config.Used+'%');         
$('#yellow').css('width',config.Usage+'%');

宽度随着数据的变化而动态变化，每当数据有变化时计算。我在下面附上了三张图片，可以很容易地理解我的意思。对于第一张图片，因为宽度之和大于 100%，#yellow 低于 #red。绿色背景是#gray的宽度。我希望当宽度总和增加 100% 时 #yellow 不应低于 #red 而应该像第二张带有视觉指示的图像可能是虚线像第三张图片一样超过 100% 限制的点。希望这有助于解释我的问题。

Answer 1

<div id="gray">
   <div id="red"></div>
   <div id="yellow"></div>
</div>

jQuery 将放在 $(document).ready() 中

var w_red=$("#red").outerWidth(true);
var w_yellow=$("#yellow").outerWidth(true);
$("#gray").width(w_red+w_yellow);

根据您的更新

config.hourPerPercent=parseInt(data.totalspace)/100;
var futureNum=new Number((1/config.hourPerPercent)*parseInt(data.inuse));
var recNum=new Number((1/config.hourPerPercent)*parseInt(data.used));

config.Usage=futureNum.toFixed(2);              
config.Used=recNum.toFixed(2);
var factor=1.0;
if( (config.Usage + config.Used)>100 )
{
 factor=(config.Usage + config.Used)/100;
 config.Usage= Math.round(config.Usage / factor);
 config.Used=100-config.Usage;
}


$('#red').css('width',config.Used+'%');         
$('#yellow').css('width',config.Usage+'%');

这样会有+/-1的误差。但它要好得多。