How to calculate the value of the boxes px?

Question

Total width of the bar = 500px, red box = 1, yellow box = 1, green box = 2,

CSS:

.box { 
        float:left;
        width:150px;
        box-shadow:3px 3px 2px #666767;
        height:30px; 
    }
.red { 
        background-color:#ff0000;
        width:150px;                
    }
.yellow {           
        background-color:#ffff00; 
        width:200px;
        }
.green {
        background-color:#00ff00;
        width:50px;
        }

HTML Code :

content += "<div class=\"box-container\">
               <div class=\"box red\">
               </div>

               <div class=\"box yellow\">
               </div>

               <div class=\"box green\">
               </div>
            </div>
         </br>"; 

From this I want to calculate the Width of the box in px for the redbox, yellowbox and greenbox.

Answer 1

I did the simple calculations and set the value for the width.

var totalIssues = args.chart.chartWidth[i].redWidth + args.chart.chartWidth[i].yellowWidth + args.chart.chartWidth[i].greenWidth; 
            var red = (args.chart.chartWidth[i].redWidth/totalIssues)*100;
            var yellow = (args.chart.chartWidth[i].yellowWidth/totalIssues)*100;
            var green = (args.chart.chartWidth[i].greenWidth/totalIssues)*100;

            var totalPx = 300; 

            var redWid = (red/100) * 500;
            var yellowWid = (yellow/100) * 500;
            var greenWid = (green/100) * 500;


            console.log("Red Width : " + redWid + "Yellow Width : "+ yellowWid+ "Green Width : "+greenWid);
            content += "<div class=\"project-data\"><div class=\"box-container"+i+"\"><div class=\"box"+i+" red" +i+ "\"></div><div class=\"box"+i+" yellow" +i+ "\"></div><div class=\"box"+i+" green" +i+ "\"></div></div></br>"; 
             content += "<style type=\"text/css\"> ";
             content +=".box-container"+i+"{ margin: 50;}";
             content +=".box"+i+"{float: left; width:150px; box-shadow:3px 3px 2px #666767; height:20px;}";
             content += ".red" +i+" { width: " + redWid + "px; background-color:#ff0000; }";
             content += ".yellow"+i+" { width: " + yellowWid + "px; background-color:#ffff00;  }";
             content += ".green"+i+" { width: " + greenWid + "px; background-color:#00ff00; }";      
             content +=  "</style> </br>";

Answer 2

var redWidth = document.getElementsByClassName("red").offsetWidth;
var yellowWidth = document.getElementsByClassName("yellow").offsetWidth;
var greenWidth = document.getElementsByClassName("green").offsetWidth;

Answer 3

I made a few changes to the html and css because it didn't seem to work for me, but here is a console.log with the right px values.

  <div class="box">
    <div id="red" class="color">
    </div>

    <div id="yellow" class="color">
    </div>

    <div id="green" class="color">
    </div>
   </div>

CSS

.box { 
    float:left;
    width:500px;
    background-color: white 0;
    box-shadow:3px 3px 2px grey;
    height:30px; 
 }    
#red { 
    background-color:red;
    width:25%; 
    height:100%;
        float: left;
 }
#yellow {           
    background-color:yellow; 
    width:25%;
    height:100%;
    float:left;
    }
#green {
    background-color: #00ff00;
    width: 50%;
    height: 100%;
    float: left;
    }

Javascript

 function getWidth(){
   var redWidth = $("#red").width();
   var greenWidth = $('#green').width();
   var yellowWidth = $('#yellow').width();
   console.log(redWidth, yellowWidth, greenWidth);
 }
 getWidth();

Answer 4

You can find width of box following way using JQuery.

width1 = $(".red").width();
width2 = $(".yellow").width();
width3 = $(".green").width();

totalWidth = width1 + width2 + width3;
alert(totalWidth);

.box {
  float: left;
  width: 150px;
  box-shadow: 3px 3px 2px #666767;
  height: 30px;
}

.red {
  background-color: #ff0000;
  width: 150px;
}

.yellow {
  background-color: #ffff00;
  width: 200px;
}

.green {
  background-color: #00ff00;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-container">
  <div class="box red"></div>
  <div class="box yellow"></div>
  <div class="box green"></div>
</div>

Working Fiddle